beta

Button

1. Was macht das Element?

  • Löst eine Aktion auf einer Seite aus.

2. Wann soll das Element 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

Das Element hat folgende Zustände:

  • Default
  • Hover
  • On-click
  • Disabled

4.1 Primary Button

Design Spezifikation

Code Spezifikation

4.2 Secondary Button

Design Spezifikation

Code Spezifikation

4.3 Ghost Button

Design Spezifikation

Code Spezifikation

4.4 Frameless Button

Design Spezifikation

Code Spezifikation