Zur NavigationZum InhaltKontaktMenüKomponente findenÜbersicht LeanKomponente finden
More Info
Brand
Display
FigmaCode
More Info
Divider
Display
FigmaCode
More Info
Icon
Display
FigmaCode
More Info
Text
Display
FigmaCode
More Info
Typograhpy
Basics
FigmaCode
More Info
Accordion
Container
FigmaCode
More Info
Autocompletion
Form
FigmaCode
More Info
Breadcrumb
Navigation
FigmaCode
More Info
Button
Action
FigmaCode
More Info
Buttonbar
Action
FigmaCode
More Info
Checkbox
Form
FigmaCode
More Info
Checkboxpanel
Form
FigmaCode
More Info
Chip
Form
FigmaCode
More Info
Contextmenu
Action
FigmaCode
More Info
Datepicker
Form
FigmaCode
More Info
Dialog
Container
FigmaCode
More Info
Fieldset
Form
FigmaCode
More Info
Fileselector
Form
FigmaCode
More Info
Filter
Form
FigmaCode
More Info
Header
Navigation
FigmaCode
More Info
Link
Action
FigmaCode
More Info
Loadingindicator
Indicator
FigmaCode
More Info
Menuitem
ActionNavigation
FigmaCode
More Info
Notification
Indicator
FigmaCode
More Info
Pagination
NavigationIndicator
FigmaCode
More Info
Processflow
NavigationIndicator
FigmaCode
More Info
Radiobutton
Form
FigmaCode
More Info
Radiobuttonpanel
Form
FigmaCode
More Info
Select
Form
FigmaCode
More Info
Sidebar
Navigation
FigmaCode
More Info
Slider
Form
FigmaCode
More Info
Status
Indicator
FigmaCode
More Info
Tab
ContainerNavigation
FigmaCode
More Info
Table
Display
FigmaCode
More Info
Tag
Form
FigmaCode
More Info
Textarea
Form
FigmaCode
More Info
Textexpand
Indicator
FigmaCode
More Info
Textfield
Form
FigmaCode
More Info
Timefield
Form
FigmaCode
More Info
Toggle
Form
FigmaCode
More Info
Tooltip
Container
FigmaCode
More Info
Tree
Navigation
FigmaCode
More Info
Usermenu
ActionNavigation
FigmaCode
Es wurden keine Suchresultate gefunden.
Probiere es mit anderen oder weniger Suchbegriffen.
PrinzipienGrundlagenBarrierefreiheitDesign SystemGuidelinesDeutschFrançaisItalianoEnglishUnsere GestaltungsprinzipienNutzerzentriertWiedererkennbarInklusivReduziertGanzheitlichSelbsterklärendAufgabenorientiertPassendSBB MarkenportalLogoDigitale UhrNutzungsrechteBasis-FarbenZusätzliche FarbenOff-Brand FarbenIconsFahrplan-IconsPiktogrammeÜber BarrierefreiheitÜber diesen GuideKontaktWeitere InformationenProduct OwnerUser ResearchInteraction DesignVisual DesignDevelopmentContent DesignTestingWas ist ein Design System?DesigningCodingFAQHilfeProzessContributionKontaktÜbersichtBasisKomponentenÜbersichtReleasesDesign TokensKomponentenÜbersichtBasisInformationenÜbersichtBasisKomponentenÜbersichtPower-AppsDigitale WerbebannerSAPAI Design: GrundlagenApp IconsNotification Übersicht
Was macht die Komponente?
Dient zur Anzeige von Meldungen, welche eine ganze Seite betreffen.
Wann soll die Komponente eingesetzt werden?
Wenn Benutzer*innen auf einer Seite eine Aktion ausgelöst haben und vom System ein Feedback erhalten soll.
Oder wenn ein technisches Problem besteht, das die Benutzer*innen am Arbeiten hindert.
Regeln
Notifications erscheinen immer erst nach dem Auslösen einer Aktion durch die Benutzer*innen.
Die Breite kann sich nach der Breite eines Formulars, dem ganzen Content-Bereich oder einer Standardbreite beim Ensatz als Toast richten.
Die Höhe richtet sich nach der Textlänge der Meldung.
Werden die Benutzer*innen am Weiterarbeiten gehindert (durch einen Fehler), so wird die Applikation mittels Milchglas gesperrt. In diesem Fall kann auch die Notification nicht weggeklickt werden (das 'X' wird dann nicht angezeigt).
Varianten
Zustände
Die Komponente hat folgende Zustände:
Default
Varianten
Bestätigung
Hinweis
Warnung
Fehler
Fehler mit Sprungmarke
Kann ein Fehler nicht einem einzelnen Element zugewiesen werden, dann wird die Fehlermeldung mit Sprungmarken eingesetzt.
Die einzelnen Sprungmarken werden durch ein «/» getrennt.
Beim Klick auf eine Sprungmarke wird direkt zum Ursprung des entsprechenden Fehlers gescrollt.
Das Sprungmarkenziel ist immer auf derselben Seite wie die Notification (kein Absprung auf andere Seiten).
Notification Toast
Benachrichtigungen können einerseits direkt innerhalb des Contentbereichs angezeigt werden (z.B. aufgrund einer Form-Validierung). Für Benachrichtigungen können aber auch "einfliegende" Toasts verwendet werden.
Die Anzeigedauer bis zum automatischen Verschwinden kann jetzt nach Anwendungsfall definiert werden. Dahingehend können Toasts auch konfiguriert werden, dass sie nicht automatisch verschwinden.