Zur Navigation Zum Inhalt Kontakt Menu Komponente finden Übersicht Lyne Prinzipien Grundlagen Barrierefreiheit Design System Guidelines Deutsch Français Italiano English Unsere Gestaltungsprinzipien Nutzerzentriert Wiedererkennbar Inklusiv Reduziert Ganzheitlich Selbsterklärend Aufgabenorientiert Passend SBB Markenportal Logo Digitale Uhr Nutzungsrechte Basis-Farben Funktionale Farben Off-Brand Farben Icons Fahrplan-Icons Piktogramme Über Barrierefreiheit Über diesen Guide Kontakt Weitere Informationen Product Owner User Research Interaction Design Visual Design Development Content Design Testing Was ist ein Design System?​ Designing Coding FAQ Hilfe Prozess Contribution Kontakt Übersicht Basis Komponenten Übersicht Releases Design Tokens Komponenten Roadmap Übersicht Basis Informationen Übersicht Basis Komponenten Sinn & Zweck Community Assets Anleitung Power-Apps Digitale Werbebanner SAP App Icons Dialog Info

Was macht die Komponente?

Ein Dialog ist ein Overlay, das den Hauptinhalt der Seite überlagert und eine fokussierte Interaktion oder wichtige Information präsentiert, bis Nutzende die Aktion abgeschlossen oder den Dialog geschlossen haben.

Wann soll die Komponente eingesetzt werden?

  • Um wichtige Informationen oder Bestätigungen an Nutzende zu übermitteln.
  • Um Nutzende zu einer Handlung aufzufordern, bevor er mit dem Hauptinhalt der Seite fortfährt.
  • Um komplexe Formulare oder Inhalte anzuzeigen, die nicht in die Hauptseite integriert werden sollen.

Regeln

  • Ein Dialog soll so weit wie möglich reduziert sein und sich auf eine einzige Aufgabe/Information oder ein einziges Formular konzentrieren.
  • Der Dialog soll leicht zu schliessen sein, entweder durch eine Schliessen-Schaltfläche oder durch Klicken ausserhalb des Dialogs.
  • Wenn kein Actions im Dialog-Footer definiert werden, müssen Nutzende den Dialog immer schliessen können.
  • Dialoge lassen sich auch immer mit der ESC-Taste schliessen.
Overlay Dialog-Actions Dialog-Actions Dialog-Title
Anatomie
Anatomie der Komponente
Nummer Typ Beschreibung Optional Hinweis
1 Komponente sbb-dialog-title Nein
1a Komponente sbb-secondary-button Ja Back-Button
1b Komponente sbb-secondary-button Nein
1c Komponente sbb-secondary-button Ja Close-Action
2 Komponente sbb-title Nein
2a Slot Beliebiger Inhalt erlaubt Nein
3 Komponente sbb-dialog-actions Ja
3a Komponente sbb-secondary-button Ja Auch Block-Links sind erlaubt
3b Komponente sbb-button Ja Auch Block-Links sind erlaubt
Demo

Spielwiese

mit Action-Groupohne Action-GroupTitle

Dialog content

LinkCancelConfirm
Title

Dialog content

Negativ Nein Ja Back-Button Nein Ja Hintergrund White Milk Iron Charcoal Black
Default
Negative
Allow Backdrop Click
Long Content
Hidden Title
Form
No Back Button
No Footer
Nested
HTML in Zwischenablage kopiert.
Implementation

The sbb-dialog component provides a way to present content on top of the app's content.
It offers the following features:

  • creates a backdrop for disabling interaction below the modal;
  • disables scrolling of the page content while open;
  • manages focus properly by setting it on the first focusable element;
  • can host a sbb-dialog-actions component in the footer;
  • has a close button, which is always visible;
  • can display a back button next to the title;
  • adds the appropriate ARIA roles automatically.
<sbb-dialog>
  <sbb-dialog-title>Title</sbb-dialog-title>
  <sbb-dialog-content>Dialog content.</sbb-dialog-content>
</sbb-dialog>

Slots

There are three slots: title, content and actions, which can respectively be used to provide an sbb-dialog-title, sbb-dialog-content and an sbb-dialog-actions.

<sbb-dialog>
  <sbb-dialog-title>Title</sbb-dialog-title>
  <sbb-dialog-content>Dialog content.</sbb-dialog-content>
  <sbb-dialog-actions>
    <sbb-block-link sbb-dialog-close>Link</sbb-block-link>
    <sbb-secondary-button sbb-dialog-close> Cancel </sbb-secondary-button>
    <sbb-button sbb-dialog-close> Confirm </sbb-button>
  </sbb-dialog-actions>
</sbb-dialog>

Interactions

In order to show the dialog, you need to call the open(event?: PointerEvent) method on the sbb-dialog component.
It is necessary to pass the event object to the open() method to allow the dialog to detect
whether it has been opened by click or keyboard, so that the focus can be better handled.

<sbb-button
  label="Open dialog"
  click="openDialog(event, 'my-dialog')"
  aria-haspopup="dialog"
  aria-controls="my-dialog"
></sbb-button>

<sbb-dialog id="my-dialog">
  <sbb-dialog-title>Title</sbb-dialog-title>
  <sbb-dialog-content>Dialog content.</sbb-dialog-content>
</sbb-dialog>

<script>
  const openDialog = (event, id) => {
    const dialog = document.getElementById(id);
    dialog.open(event);
  };
</script>

To dismiss the dialog, you need to get a reference to the sbb-dialog element and call
the close(result?: any, target?: HTMLElement) method, which will close the dialog element and
emit a close event with an optional result as a payload.

The component can also be dismissed by clicking on the close button, clicking on the backdrop, pressing the Esc key,
or, if an element within the sbb-dialog has the sbb-dialog-close attribute, by clicking on it.

You can also set the property backButton on the sbb-dialog-title component to display the back button in the title section which will emit the event requestBackAction when clicked.

Style

It's possible to display the component in negative variant using the self-named property.

<sbb-dialog negative>
  <sbb-dialog-title>Title</sbb-dialog-title>
  <sbb-dialog-content>Dialog content.</sbb-dialog-content>
</sbb-dialog>

Accessibility

When using a button to trigger the dialog, ensure to manage the appropriate ARIA attributes on the button element itself. This includes: aria-haspopup="dialog" that signals to assistive technologies that the button controls a dialog element,
aria-controls="dialog-id" that connects the button to the dialog by referencing the dialog's ID. Consider using aria-expanded to indicate the dialog's current state (open or closed).

The sbb-dialog component may visually hide the title thanks to the hideOnScroll property of the sbb-dialog-title to create more space for content, this is useful especially on smaller screens. Screen readers and other assistive technologies will still have access to the title information for context.

Properties

Name Attribute Privacy Type Default Description
accessibilityLabel accessibility-label public string '' This will be forwarded as aria-label to the relevant nested element to describe the purpose of the overlay.
backdropAction backdrop-action public 'close' | 'none' 'close' Backdrop click action.
isOpen - public boolean Whether the element is open.
negative negative public boolean false Negative coloring variant flag.

Methods

Name Privacy Description Parameters Return Inherited From
close public Closes the component. result: any, target: HTMLElement any SbbOpenCloseBaseElement
open public Opens the component. void SbbOpenCloseBaseElement

Events

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

CSS Properties

Name Default Description
--sbb-dialog-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 provide a sbb-dialog-title, sbb-dialog-content and an optional sbb-dialog-actions.
Komponente finden

Lyne

  • Design Tokens
  • Animation
    Animation
  • Border
    Border
  • Breakpoint
    Breakpoint
  • Color
    Color
  • Layout
    Layout
  • Shadow
    Shadow
  • Size
    Size
  • Spacing
    Spacing
  • Typografie
    Typografie
  • Action
  • More Info
    Action-Group
  • More Info
    Block-Link
  • More Info
    Button
  • More Info
    Link
  • More Info
    Mini-Button-Group
  • More Info
    Secondary-Button
  • More Info
    Teaser
  • More Info
    Teasser-Hero
  • More Info
    Teaser-Product
  • More Info
    Teaser-Product-Static
  • More Info
    Tertiary-Button
  • More Info
    Transparent-Button
  • Brand
  • More Info
    Clock
  • More Info
    Logo
  • Collection
  • More Info
    Link-List
  • More Info
    Link-List-Anchor
  • More Info
    Skiplink-List
  • More Info
    Table-Wrapper
  • Form
  • More Info
    Autocomplete
  • More Info
    Autocomplete-Grid
  • More Info
    Calendar
  • More Info
    Checkbox
  • More Info
    Checkbox-Group
  • More Info
    Checkbox-Panel
  • More Info
    Datepicker
  • More Info
    File-Selector
  • More Info
    Form-Field
  • More Info
    Radio-Button
  • More Info
    Radio-Button-Group
  • More Info
    Radio-Button-Panel
  • More Info
    Select
  • More Info
    Selection-Expansion-Panel
  • More Info
    Slider
  • More Info
    Toggle
  • More Info
    Toggle-Check
  • Indicator
  • More Info
    Alert
  • More Info
    Alert-Group
  • More Info
    Chip
  • More Info
    Loading-Indicator
  • More Info
    Message
  • More Info
    Notification
  • More Info
    Status
  • More Info
    Stepper
  • More Info
    Tag-Group
  • More Info
    Toast
  • Layout
  • More Info
    Accordion
  • More Info
    Card
  • More Info
    Container
  • More Info
    Divider
  • More Info
    Footer
  • More Info
    Header
  • More Info
    Title
  • Navigation
  • More Info
    Breadcrumb
  • More Info
    Breadcrumb-Group
  • More Info
    Menu
  • More Info
    Navigation
  • More Info
    Tab-Group
  • Overlay
  • More Info
    Dialog
  • More Info
    Overlay
  • More Info
    Popover
  • Time-Table
  • More Info
    Journey-Header
  • More Info
    Pearl-Chain
  • Visual asset
  • More Info
    Icon
  • More Info
    Image
Impressum Kontakt Datenschutz Cookie Einstellungen