Badge
Status-Pills und Tags in zehn Farbwelten. Jede Variante kombiniert eine zarte Tint-Fläche mit einer Textfarbe aus den semantischen Tokens; Zahlen bleiben tabellarisch. Die Bedeutung steht immer im Text, der optionale Punkt ist nur ein zusätzlicher Hinweis.
Varianten
Zehn Farbwelten aus den semantischen Tokens: neutral für Kontext, accent für die Marke, success/warning/danger/info für Status und vier Tint-Farben für Kategorien.
neutralNeutralaccentAkzentsuccessErfolgwarningWarnungdangerGefahrinfoInfoorangeOrangeblueBlaugreenGrünvioletViolett
Mit Punkt
dot setzt einen kleinen Punkt in der aktuellen Textfarbe. Der Punkt ist dekorativ – die Aussage steht im Text, Farbe allein trägt nie Bedeutung.
Größen
sm eignet sich für dichte Tabellen, md für Kopfzeilen und Karten. Zahlen bleiben über tabular-nums bündig.
Als Status in einer Liste
In Tabellen und Listen sitzt der Badge rechts; die Zeile bleibt ruhig, der Status ist sofort erkennbar.
- Rechnung 2026-041Bezahlt
- Rechnung 2026-042Offen
- Rechnung 2026-043Überfällig
- Rechnung 2026-044Entwurf