Button-❌
Questa pagina non è disponibile nella lingua desiderata. Lingue disponibili: Deutsch
English
Français
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/Tertiary Buttons erlaubt.
4. Ausprägungen und Zustände
Das Element hat folgende Zustände:
- Normal
- Pressed
- Disabled
- Loading
4.1. Primary Button
- Der Primary Button nutzt die volle Breite des verfügbaren Platzes, abzüglich 16px Padding
Design Spezifikation
4.2. Secondary Button
- Der Secondary Button nutzt die volle Breite des verfügbaren Platzes, abzüglich 16px Padding
Design Spezifikation
4.3. Tertiary Button
4.3.1. Large
- Der Tertiary Button kann sowohl auf die volle Breite des verfügbaren Platzes dargestellt (abzüglich 16px Padding), als auf den benötigten Platz beschränkt werden.
Design Spezifikation
- Default: Light, Dark
- Pressed: Light, Dark
- Disabled: Button ausblenden
- Loading: Dieser Zustand ist bei dieser Variante nicht vorgesehen
4.3.1. Small
- Die Breite des Buttons definiert sich durch die Länge des Textes, eine Verbreiterung ist nicht erlaubt.
Design Spezifikation
- Default: Light, Dark
- Pressed: Light, Dark
- Disabled: Button ausblenden
- Loading: Dieser Zustand ist bei dieser Variante nicht vorgesehen
4.4. Icon Button
4.4.1. Large
Design Spezifikation
- Default: Light, Dark
- Pressed: Light, Dark
- Disabled: Light, Dark
- Loading: Dieser Zustand ist bei dieser Variante nicht vorgesehen
4.4.2. Small
- Das Touch-Target ist auf 44px x 44px gesetzt (wie bei Large), die Darstellung des Kreises ist jedoch kleiner.
- Bei enthaltenen Icon ist darauf zu achten, dass es den Rand des Kreises nicht berührt.
Design Spezifikation
- Default: Light, Dark
- Pressed: Light, Dark
- Disabled: Button ausblenden
- Loading: Dieser Zustand ist bei dieser Variante nicht vorgesehen
4.4.4. In Formularen
- Die Rahmen rund um den Button werden durch das Formular bestimmt. Beispiel anzeigen
Design Spezifikation
- Default: Light, Dark
- Pressed: Light, Dark
- Disabled: Button ausblenden
- Loading: Dieser Zustand ist bei dieser Variante nicht vorgesehen
4.5. Icon mit Text
- Darf nie einzeln dargestellt werden (min. zwei Buttons)
- Die Breite der Buttons definiert sich durch den verfügbaren Platz (abzüglich 16p Padding)
Design Spezifikation
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
- Ganze Breite des Screens oder des modalen Dialogs (abzüglich Abstand).
Design Spezifikation
4.2. Secondary Button
- Ganze Breite des Screens oder des modalen Dialogs (abzüglich Abstand).
Design Spezifikation
4.3. Icon Button
4.3.1. Frei
Design Spezifikation
4.3.2. In Formularen
Design Spezifikation
4.4. Frameless Primary Button
4.4.1. Large
Design Spezifikation
4.4.2. 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
Design Spezifikation
4.5.2. Small
