Navigieren auf digital.sbb.ch

Beta

Button

1. Was macht das Element?

  • Löst eine Aktion aus.

2. Wann soll das Element eingesetzt werden?

  • Beim Starten oder Beenden eines Prozesses.
  • Beim Absenden eines Formulars.
  • Beim Aufrufen einer Funktion.

3. Regeln

  • Darf nicht innerhalb von Fliesstext eingesetzt werden.
  • Der Text ist immer einzeilig.
  • Pro Seite/Dialog darf nur ein Primary Button eingesetzt werden.
  • Pro Seite/Dialog sind mehrere Secondary Buttons erlaubt.
  • Secondary und Tertiary Buttons dürfen nur eingesetzt werden, wenn bereits ein Primary Button vorhanden ist.

4. Ausprägungen und Zustände

Das Element hat folgende Zustände:

  • Normal
  • Pressed
  • Disabled
  • Loading

4.1. Primary

Darstellung des Primary Button
Darstellung des Primary Button
  • Ganze Breite des Screens oder des modalen Dialogs (abzüglich Abstand).

4.2. Secondary

Darstellung des Secondary Button
Darstellung des Secondary Button
  • Ganze Breite des Screens oder des modalen Dialogs (abzüglich Abstand).

4.3. Tertiary

4.3.1. Label und Icon

Darstellung des Tertiary Buttons mit Label und Icon
Darstellung des Tertiary Buttons mit Label und Icon

4.3.2. Label

Darstellung des Tertiary Buttons mit Label
Darstellung des Tertiary Buttons mit Label

4.3.3. Icon

Darstellung des Tertiary Buttons mit Icon
Darstellung des Tertiary Buttons mit Icon

4.4. Tertiary small

4.4.1. Label und Icon

Darstellung des Tertiary Small Buttons mit Label und Icon
Darstellung des Tertiary Small Buttons mit Label und Icon

4.4.2. Label

Darstellung des Tertiary Small Buttons mit Label
Darstellung des Tertiary Small Buttons mit Label

4.4.3. Icon

Darstellung des Tertiary Small Buttons mit Icon
Darstellung des Tertiary Small Buttons mit Icon

Design Spezifikation

Figma-Link