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/Tertiary Buttons erlaubt.

4. Ausprägungen und Zustände

Das Element hat folgende Zustände:

  • Normal
  • Pressed
  • Disabled
  • Loading

4.1. Primary Button

Darstellung des Primary Button
Darstellung des Primary Button
  • Der Primary Button nutzt die volle Breite des verfügbaren Platzes, abzüglich 16px Padding

Design Spezifikation

4.2. Secondary Button

Darstellung des Secondary Button
Darstellung des Secondary Button
  • Der Secondary Button nutzt die volle Breite des verfügbaren Platzes, abzüglich 16px Padding

Design Spezifikation

4.3. Tertiary Button

4.3.1. Large

Darstellung des Tertiary Button Large
Darstellung des Tertiary Button Large
  • Der Tertiary Button kann sowohl auf die volle Breite des verfügbaren Platzes dargestellt (abzüglich 16px Padding), als auf den benötigten Platz beschränkt werden.

Design Spezifikation

  • Default: Light, Dark
  • Pressed: Light, Dark
  • Disabled: Button ausblenden
  • Loading: Dieser Zustand ist bei dieser Variante nicht vorgesehen

4.3.1. Small

Darstellung des Tertiary Button Small
Darstellung des Tertiary Button Small
  • Die Breite des Buttons definiert sich durch die Länge des Textes, eine Verbreiterung ist nicht erlaubt.

Design Spezifikation

  • Default: Light, Dark
  • Pressed: Light, Dark
  • Disabled: Button ausblenden
  • Loading: Dieser Zustand ist bei dieser Variante nicht vorgesehen

4.4. Icon Button

4.4.1. Large

Darstellung des Icon Buttons Large
Darstellung des Icon Buttons Large

Design Spezifikation

4.4.2. Small

Darstellung des Icon Buttons Small
Darstellung des Icon Buttons Small
  • Das Touch-Target ist auf 44px x 44px gesetzt (wie bei Large), die Darstellung des Kreises ist jedoch kleiner.
  • Bei enthaltenen Icon ist darauf zu achten, dass es den Rand des Kreises nicht berührt.

Design Spezifikation

  • Default: Light, Dark
  • Pressed: Light, Dark
  • Disabled: Button ausblenden
  • Loading: Dieser Zustand ist bei dieser Variante nicht vorgesehen

4.4.4. In Formularen

Darstellung des Icon Buttons in Formularen
Darstellung des Icon Buttons in Formularen
  • Die Rahmen rund um den Button werden durch das Formular bestimmt. Beispiel anzeigen

Design Spezifikation

  • Default: Light, Dark
  • Pressed: Light, Dark
  • Disabled: Button ausblenden
  • Loading: Dieser Zustand ist bei dieser Variante nicht vorgesehen

4.5. Icon mit Text

  • Darf nie einzeln dargestellt werden (min. zwei Buttons)
  • Die Breite der Buttons definiert sich durch den verfügbaren Platz (abzüglich 16p Padding)
Darstellung des Icon Buttons mit Text
Darstellung des Icon Buttons mit Text

Design Spezifikation

  • Default: Light, Dark
  • Pressed: Light, Dark
  • Disabled: Button ausblenden
  • Loading: Dieser Zustand ist bei dieser Variante nicht vorgesehen

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 Frameless 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

4.1. Primary Button

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

Design Spezifikation

4.2. Secondary Button

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

Design Spezifikation

4.3. Icon Button

4.3.1. Frei

Darstellung des Icon Buttons frei

Design Spezifikation

4.3.2. In Formularen

Darstellung des Icon Buttons in Formularen

Design Spezifikation

4.4. Frameless Primary Button

4.4.1. Large

Darstellung des Frameless Primary Buttons Large

Design Spezifikation

4.4.2.  Small

Darstellung des Frameless Primary Buttons Small

Design Spezifikation

4.5. Frameless Secondary Button

  • Ist nur in Kombination mit dem Frameless Primary Button erlaubt.
  • Ist nur in modalen Dialogen erlaubt.
  • Ist links im Dialog positioniert. 
  • Bei mehreren Buttons (Framless Secondary) sind alle rechtsbündig positioniert

4.5.1. Large

Darstellung des Frameless Secondary Buttons Large

Design Spezifikation

4.5.2. Small

Darstellung des Frameless Secondary Buttons Small

Design Spezifikation