Preview.

What does the component do?

A message shows a notice within the page layout, e.g. a hint, an error or an empty state. It consists of a title and, optionally, a subtitle, an image, an error code and an action. Unlike a notification, it has no type and cannot hide itself.

When should the component be used?

• For messages that are part of the content, e.g. in empty lists or when content fails to load.
• When the message should attract less attention than an alert or notification.

Rules.

• The message is integrated into the layout and is not positioned like an alert or notification.
• Title and text state clearly what happened and what users can do.
• An action (e.g. "Try again") is optional.

Specification.

Web Components.

The web component is in the package @sbb-esta/lyne-elements.

Documentation.

The <sbb-message> component can be used to display a complex message.

Slots.

The title slot should be used to slot a <sbb-title> element.
Optionally, the user can provide other elements such as a subtitle paragraph via the subtitle slot,
a sbb-image to provide an image via the image slot,
a paragraph to provide an error code via the legend slot,
and a sbb-button to provide a custom action via the action slot.

<sbb-message>
  <sbb-image slot="image" [...]></sbb-image>
  <sbb-title slot="title" level="3">Title</sbb-title>
  <p slot="subtitle">Subtitle</p>
  <p slot="legend">Error code: 0001</p>
  <sbb-button slot="action" [...]>Action</sbb-button>
</sbb-message>

Angular.

This component is also available for Angular in the package @sbb-esta/lyne-angular.

class: SbbMessageElement, sbb-message.

Slots.