Navigieren auf digital.sbb.ch

Zur Startseite von digital.sbb.ch

Button

1. Was macht die Komponente?

  • Löst eine Aktion auf einer Seite aus.

2. Wann soll die Komponente eingesetzt werden?

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

3. Regeln

  • Darf nicht innerhalb von Fliesstext eingesetzt werden.
  • Darf nicht im Header als Navigation oder Funktion eingesetzt werden.
  • Die Mindestbreite beträgt 60px.
  • Die Breite wächst mit der Textlänge. Bei mobilen Ansichten ist die Breite 100%.
  • Ist der Text beim Erreichen der Maximallänge immer noch zu lang, wird dieser mit «...» abgekürzt.
  • Der Text ist immer einzeilig.
  • Buttons werden im Viewport rechtsbündig angeordnet. Der Primary Button wird links vom Secondary Button platziert.

4. Ausprägungen und Zustände

Die Komponente hat folgende Zustände:

  • Default
  • Hover
  • On-click
  • Disabled

4.1 Primary Button

Darstellung der Komponente Primary Button

Design Spezifikation

Code Spezifikation

4.2 Alternative Primary Button

Darstellung der Komponente Alternativer Primary Button

Design Spezifikation

Code Spezifikation

4.3 Secondary Button

Darstellung der Komponente Secondary Button

Design Spezifikation

Code Spezifikation

4.4 Ghost Button

Darstellung der Komponente Ghost Button

Design Spezifikation

Code Spezifikation

4.5 Icon Button

Darstellung der Komponente Icon Button

Design Spezifikation

Code Spezifikation

4.6 Mehrere Aktionen

Darstellung der Komponente Button bei dem mehrere Aktionen hinterlegt sind

1. Was macht die Komponente?

  • Löst eine Aktion auf einer Seite aus.

2. Wann soll die Komponente eingesetzt werden?

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

3. Regeln

  • Darf nicht innerhalb von Fliesstext eingesetzt werden.
  • Darf nicht im Header als Navigation oder Funktion eingesetzt werden.
  • Die Mindestbreite beträgt 60px.
  • Die Breite wächst mit der Textlänge. Bei mobilen Ansichten ist die Breite 100%.
  • Ist der Text beim Erreichen der Maximallänge immer noch zu lang, wird dieser mit «...» abgekürzt.
  • Der Text ist immer einzeilig.
  • Buttons werden im Viewport rechtsbündig angeordnet. Der Primary Button wird links vom Secondary Button platziert.

4. Ausprägungen und Zustände

Die Komponente hat folgende Zustände:

  • Default
  • Hover
  • On-click
  • Disabled

4.1 Primary Button

Darstellung der Komponente Primary Button
Darstellung der Komponente Primary Button

Design Spezifikation

Code Spezifikation

4.2 Alternative Primary Button

Darstellung der Komponente Alternativer Primary Button
Darstellung der Komponente Alternativer Primary Button

Design Spezifikation

Code Spezifikation

4.3 Secondary Button

Darstellung der Komponente Secondary Button
Darstellung der Komponente Secondary Button

Design Spezifikation

Code Spezifikation

4.4 Ghost Button

Darstellung der Komponente Ghost Button
Darstellung der Komponente Ghost Button

Design Spezifikation

Code Spezifikation

4.5 Icon Button

Darstellung der Komponente Icon Button
Darstellung der Komponente Icon Button

Design Spezifikation

Code Spezifikation

4.6 Mehrere Aktionen

Darstellung der Komponente Button bei dem mehrere Aktionen hinterlegt sind
Darstellung der Komponente Button bei dem mehrere Aktionen hinterlegt sind