Zur Navigation Zum Inhalt Kontakt Menu Trova un componente Descrizione generale Lyne Principi Base Accessibilité Sistema di design Guidelines Deutsch Français Italiano English I nostri principi di design Soluzioni focalizzate sull’utente Riconoscibilità Inclusione Riduzione Olistico Autoesplicativo Orientamento all’attività Adeguatezza Portale della marca FFS Logo Orologio digitale Diritti di utilizzazione Colori die base Colori funzionali Colori Off Brand Icone Icone dell'orario Pittogrammi Informazioni sull’accessibilità Über diesen Guide Contatti Letture consigliate Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Aiuto Processo Contribution Contatto Introduzione Base Componenti Introduzione Base Componenti Introduzione Base Componenti Overview Releases Design Tokens Komponenten Introduzione Base Informazioni Senso & scopo Community Assets Istruzioni Power-Apps Banner pubblicitari digitali SAP Icone delle app Questa pagina non è disponibile nella lingua desiderata. Lingue disponibili Deutsch English Toast Implementation

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

Name Attribute Privacy Type Default Description
timeout timeout public number 6000 The length of time in milliseconds to wait before automatically dismissing the toast. If 0, it stays open indefinitely.
position position public SbbToastPosition 'bottom-center' The position where to place the toast.
dismissible dismissible public boolean false Whether the toast has a close button.
politeness politeness public 'polite' | 'assertive' | 'off' 'polite' The ARIA politeness level. Check https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#live_regions for further info
disableAnimation disable-animation public boolean false Whether the animation is disabled.
iconName icon-name public string | undefined The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch.

Methods

Name Privacy Description Parameters Return Inherited From
open public Open the toast. If there are other opened toasts in the page, close them first. void
close public Close the toast. void

Events

Name Type Description Inherited From
willOpen CustomEvent<void> Emits whenever the sbb-toast starts the opening transition. Can be canceled.
didOpen CustomEvent<void> Emits whenever the sbb-toast is opened.
willClose CustomEvent<void> Emits whenever the sbb-toast begins the closing transition. Can be canceled.
didClose CustomEvent<void> Emits whenever the sbb-toast is closed.

CSS Properties

Name Default Description
--sbb-toast-z-index var(--sbb-overlay-default-z-index) To specify a custom stack order, the z-index can be overridden by defining this CSS variable. The default z-index of the component is set to var(--sbb-overlay-default-z-index) with a value of 1000.

Slots

Name Description
Use the unnamed slot to add content to the sbb-toast.
icon Assign a custom icon via slot.
action Provide a custom action for this toast.
Beispiele
Basic
Dismissible
Long Content
With Action Button
With Action Link
HTML-Markup kopiert.
Playground
Open toastLorem ipsum dolor
Position bottom-center bottom-start bottom-end top-center top-start top-end Icon Nein Ja Aktion Nein Ja Hintergrund White Milk Iron Charcoal Black
Trova un componente

Lyne

Impressum Contatto Impostazioni dei cookie