Navigieren auf digital.sbb.ch

Beta

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 Maximalbreite 400px.
  • Die Breite wächst mit der Textlänge. Beim Einsatz im Next Best Click (NBC) oder in 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.
  • In Ausnahmefällen darf das Pfeil-Icon durch ein anderes, passendes Icon ersetzt werden.
  • Pro Seite darf nur ein Primary Button eingesetzt werden.
  • Secondary, Ghost und Frameless Buttons dürfen nur eingesetzt werden, wenn bereits ein Primary Button vorhanden ist.

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

Darstellung der Komponente Secondary Button

Design Spezifikation

Code Spezifikation

4.3 Ghost Button

Darstellung der Komponente Ghost Button

Design Spezifikation

Code Spezifikation

4.4 Frameless Button

Darstellung der Komponente Frameless Button

Design Spezifikation

Code Spezifikation