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 Zusätzliche 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 Übersicht Basis Informationen Übersicht Basis Komponenten Übersicht Power-Apps Digitale Werbebanner SAP AI Design: Grundlagen App Icons Dialog-Actions Info

Was macht die Komponente?

Sie ist Teil der Dialog-Komponente.

Wann soll die Komponente eingesetzt werden?

  • Nur innerhalb der Dialog-Komponente.
Dialog
Anatomie

Anatomie der Komponente


Nummer Typ Beschreibung Optional Hinweis
1 Komponente sbb-dialog-title Nein
2 Komponente sbb-dialog-close-button Ja Close-Action
2 Slot Beliebiger Inhalt erlaubt Nein
4 Komponente sbb-dialog-actions Ja
4a Komponente sbb-secondary-button Ja Auch Block-Links sind erlaubt
4b Komponente sbb-button Ja Auch Block-Links sind erlaubt
Demo Default
HTML in Zwischenablage kopiert.
Implementation

The sbb-dialog-actions component extends the sbb-action-group component. Use it in combination with the sbb-dialog to display a footer with an action group.

<sbb-dialog>
  <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 sbb-focus-initial>Confirm</sbb-button>
  </sbb-dialog-actions>
</sbb-dialog>

Properties

Name Attribute Privacy Type Default Description
alignGroup align-group public 'start' | 'center' | 'stretch' | 'end' 'start' Set the slotted <sbb-action-group> children's alignment.
buttonSize button-size public SbbButtonSize 'm' / 's' (lean) Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances.
horizontalFrom horizontal-from public SbbHorizontalFrom 'large' Overrides the behaviour of orientation property.
linkSize link-size public SbbLinkSize 's' / 'xs' (lean) Size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances.
orientation orientation public SbbOrientation 'horizontal' Indicates the orientation of the components inside the <sbb-action-group>.

Slots

Name Description
Use the unnamed slot to add sbb-block-link or sbb-button elements to the sbb-dialog-actions.