Was macht die Komponente?

Ein Toast ist eine kurzfristige Benachrichtigung, die am Rand des Bildschirms erscheint, um Nutzende über bestimmte Ereignisse, Erfolge oder Fehler zu informieren.

Wann soll die Komponente eingesetzt werden?

• Um Nutzende über den erfolgreichen Abschluss einer Aktion zu informieren.
• Um temporäre Informationen oder Hinweise anzuzeigen, die keine Benutzerinteraktion erfordern.
• Um Fehler oder Warnungen schnell mitzuteilen.

Regeln

• Toasts sollen klar und prägnant formuliert sein, um die Nachricht schnell zu übermitteln.
• Toasts sollen innerhlab einer Webseite oder Applikation an einer konsistenten Position auf dem Bildschirm erscheinen.
• Toasts sollen nach einer angemessenen Zeit automatisch verschwinden oder manuell geschlossen werden können.

Spielwiese

Beispiele

The sbb-toast is a component that can be used to display toast notifications.

It can be shown/dismissed by calling the open/close methods.
Only one toast can ever be opened at one time:
if a new sbb-toast is opened while a previous message is still showing, the older message will be automatically dismissed.

<sbb-button onclick="document.querySelector('sbb-toast').open()">Open toast</sbb-button>
<sbb-toast>Toast content</sbb-toast>

Important note

You should carefully consider every use of the sbb-toast component since it can be a source of
stress for people with visual impairments (see the "Accessibility" section for more info).

Here are a few tips for correct usage:

• Try to avoid actions inside a sbb-toast since they are not easily reachable;
• If an action is needed, you should provide an alternative way to perform it;
• If not strictly necessary, use the polite (default) configuration since it is less aggressive for screen-reader users.

Slots

It is possible to provide a text via an unnamed slot; the component can optionally display a sbb-icon
at the component start using the iconName property or via custom content using the icon slot.

<sbb-button onclick="document.querySelector('sbb-toast').open()">Open toast</sbb-button>
<sbb-toast icon-name="dog-small">Toast content</sbb-toast>

A sbb-toast can also be given a custom action that, if marked with the sbb-toast-close attribute, will also dismiss it.

<sbb-button onclick="document.querySelector('sbb-toast').open()">Open toast</sbb-button>
<sbb-toast position="bottom-left">
  Toast content
  <!-- Toast action can be a button -->
  <sbb-transparent-button
    slot="action"
    icon-name="clock-small"
    sbb-toast-close
  ></sbb-transparent-button>
  <!-- Or a link -->
  <sbb-link-button slot="action">Link action</sbb-link-button>
</sbb-toast>

Style

If the dismissible property is set to true, a close button is displayed at the component end.
The time before the component auto-closing can be set with the timeout property (in milliseconds, default is 6000).

The position on the page where the toast will be opened can be configured with the position property,
which accepts all the combinations of the vertical positions top and bottom
with the horizontal positions left, start, center, right and end (default: bottom-center).

<sbb-button onclick="document.querySelector('sbb-toast').open()">Open toast bottom left</sbb-button>
<sbb-toast position="bottom-left" dismissible="true">Toast content</sbb-toast>

<sbb-button onclick="document.querySelector('sbb-toast#top-center').open()"
  >Open toast top center</sbb-button
>
<sbb-toast position="top-center" timeout="5000" id="top-center">Toast content</sbb-toast>

Accessibility

The sbb-toast announces messages via an aria-live region.
Use the politeness property to customize the politeness announcement behaviour.
Check ARIA live regions for further info.

The sbb-toast does not move focus to the toast element, because it would disrupt users in the middle of a workflow.

For any action offered in the sbb-toast, your application should provide an alternative way to perform the action
(e.g. a keyboard combination).

Avoid setting a timeout for toasts that have an action available,
as screen reader users may want to navigate to the toast element to activate the action.

Known issue

Slotted text is not interpreted correctly by screen readers on Chrome.
To address the problem, the component will automatically wrap any slotted text in a span element.
Unless strictly necessary, we advise you not to wrap it preventively and let the component do it for you.

<sbb-toast position="bottom-left">
  <!-- This text would not be read on Chrome -->
  Free text node
</sbb-toast>

<sbb-toast position="bottom-left">
  <span>Toast content</span>
  <!-- This is OK! -->
</sbb-toast>

Properties

Methods

Events

CSS Properties

Slots