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

4.1. Primary Button

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

4.1.1. Vermassung

4.2. Secondary Button

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

4.2.1. Vermassung

4.3.1.1. Vermassung

4.3.2. In Formularen

4.3.2.1. Vermassung

4.4. Frameless Primary Button

4.4.1. Large

4.4.1.1. Vermassung

4.4.2.  Small

4.4.2.1. Vermassung

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

4.5.1.1. Vermassung

4.5.2. Small

4.5.2.1. Vermassung