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 Notification Implementation

The sbb-notification is a component which purpose is to inform users of updates.
A notification is an element that displays a brief, important message
in a way that attracts the user's attention without interrupting the user's task.

Inline notifications show up in task flows, to notify users of an action status or other information.
They usually appear at the top of the primary content area or close to the item needing attention.

The sbb-notification is structured in the following way:

  • Icon: informs users of the notification type at a glance.
  • Title (optional): gives users a quick overview of the notification.
  • Close button (optional): closes the notification.
  • Message: provides additional detail and/or actionable steps for the user to take.
<sbb-notification>
  The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
  <sbb-link href="/">Link one</sbb-link>
  <sbb-link href="/">Link two</sbb-link>
  <sbb-link href="/">Link three</sbb-link>
</sbb-notification>

Note that the notification only supports inline links.

Variants

The sbb-notification supports four types: info (default), success, warn and error, based on the type of the information displayed.

<sbb-notification type="success">...</sbb-notification>

<sbb-notification type="warn">...</sbb-notification>

<sbb-notification type="error">...</sbb-notification>

States

It is possible to display the component in readonly state by using the self-named property.
In this case, the close button will not be shown.

<sbb-notification readonly> ... </sbb-notification>

Interactions

Inline notifications do not dismiss automatically.
They persist on the page until the user dismisses them or takes action that resolves the notification.

By default, a close button is displayed to dismiss inline notifications. Including the close button is optional
and should not be included if it is critical for a user to read or interact with the notification by setting the readonly property to true.

Style

If the sbb-notification host needs a margin, in order to properly animate it on open/close,
we suggest using the --sbb-notification-margin variable to set it.
For example, use --sbb-notification-margin: 0 0 var(--sbb-spacing-fixed-4x) 0 to apply a bottom margin.

Accessibility

In order to announce the notification's content to screen readers as it becomes visible,
consumers must use the aria-live attribute with the polite value on the component's container.
This ensures that users who rely on screen readers are promptly informed of any relevant updates or changes.

<!-- Add here any incoming notification by adding a sbb-notification component. -->
<div id="notification-container" aria-live="polite">
  <sbb-notification type="success">Task successfully completed.</sbb-notification>
</div>

Properties

Name Attribute Privacy Type Default Description
type type public 'info' | 'success' | 'warn' | 'error' 'info' The type of the notification.
titleContent title-content public string | undefined Content of title.
titleLevel title-level public SbbTitleLevel '3' Level of title, it will be rendered as heading tag (e.g. h3). Defaults to level 3.
readonly readonly public boolean false Whether the notification is readonly. In readonly mode, there is no dismiss button offered to the user.
disableAnimation disable-animation public boolean false Whether the animation is enabled.

Methods

Name Privacy Description Parameters Return Inherited From
close public void

Events

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

CSS Properties

Name Default Description
--sbb-notification-margin 0 Can be used to modify the margin in order to get a smoother animation. See style section for more information.

Slots

Name Description
Use the unnamed slot to add content to the notification message.
title Use this to provide a notification title (optional).
Beispiele
Info
Success
Warn
Error
Readonly
No Title
Readonly No Title
Slotted Title
Multiple Notifications
HTML-Markup kopiert.
Playground
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.  Link one
Typ Info Success Warn Error Read only Nein Ja Hintergrund White Milk Iron Charcoal Black
Trova un componente

Lyne

Impressum Contatto Impostazioni dei cookie