UI/UX
Shield-Button UI/UX
Designrichtlinien, Verwendungsregeln und visuelle Anatomie für diese Komponente.
Anatomy
Der Button besteht aus einem Container, einem optionalen Icon-Slot und einem Label-Slot. Die Figma-Komponente spiegelt diese Slot-Struktur 1:1 wider.
Varianten & Verwendung
Die drei Varianten decken klar getrennte Hierarchiestufen ab.
Do
- Primary für die im Context wichtigste Aktion (max. 1 pro Abschnitt).
- Secondary für ergänzende, gleichrangige Aktionen.
- Ghost für Aktionen mit niedrigem visuellem Gewicht (z.B. in Toolbars).
Don't
- Nicht mehrere Primary-Buttons nebeneinander platzieren.
- Ghost nicht als Haupt-CTA verwenden – zu wenig Kontrast für wichtige Aktionen.
- Varianten nicht willkürlich mischen, wenn kein klares Hierarchiebedürfnis besteht.
Größen
- sm: kompakte Buttons in dichten UIs (Tabellen, Toolbars).
- md: Standard für Formulare und allgemeine Aktionen.
- lg: Prominente CTAs in Hero-Bereichen oder onboarding-Flows.
Disabled State
Disabled Buttons sollen sparsam eingesetzt werden.
Do
- Disabled verwenden, wenn eine Voraussetzung noch nicht erfüllt ist.
- Den Grund für die Deaktivierung in der Nähe erklären (Inline-Hinweis oder Tooltip).
Don't
- Nicht dauerhaft deaktiviert lassen ohne Möglichkeit zur Aktivierung.
- Nicht als Styling-Trick verwenden, wenn die Funktion eigentlich fehlt.