UI/UX
Shield-Badge UI/UX
Designrichtlinien, Verwendungsregeln und visuelle Anatomie für diese Komponente.
Anatomy
Der Badge besteht aus einem Container und einem Label. Die Varianten steuern Hintergrund- und Textfarbe.
Varianten & Verwendung
Badges kommunizieren Status oder Kategorie auf einen Blick.
Do
- Primary für Haupt-Status oder aktive Kennzeichnungen verwenden.
- Secondary für neutrale oder ergänzende Informationen.
- Badge immer in direkter Nähe des zugehörigen Inhalts platzieren.
Don't
- Nicht als alleiniges Unterscheidungsmerkmal nur Farbe verwenden – Text ist Pflicht.
- Nicht für interaktive Elemente missbrauchen (kein Klick-Handler).
- Langen Fließtext nicht in einem Badge darstellen.
Einsatz
- Für Versionsnummern, Status-Labels oder Kategorie-Tags.
- In Listen, Tabellen oder neben Titeln für zusätzliche Metainformationen.
- Maßvoll einsetzen – zu viele Badges lenken vom Inhalt ab.