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