Badges & Status

Status Badges

Badges kommunizieren den Status eines Elements durch Farbcodierung.

Erfolgreich Warnung Fehler Information

Badge	Vorschau	Hintergrund	Textfarbe	Anwendung
Success	Aktiv	#DCFCE7	#15803D	Erfolgreich, Bestätigt
Warning	Ausstehend	#FEF9C3	#A16207	Warnung, In Bearbeitung
Error	Kritisch	#FEE2E2	#B91C1C	Fehler, Abgelehnt
Info	Standard	#DBEAFE	#1D4ED8	Information, Neutral

CSS

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
}

.badge-success { background: #DCFCE7; color: #15803D; }
.badge-warning { background: #FEF9C3; color: #A16207; }
.badge-error   { background: #FEE2E2; color: #B91C1C; }
.badge-info    { background: #DBEAFE; color: #1D4ED8; }

Mit Punkt-Indikator

.badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

Anwendungsregeln

1. Ein Badge pro Element — nicht mehrere Status gleichzeitig
2. Kurze Labels — maximal 2 Wörter
3. Konsistente Verwendung — gleiche Bedeutung = gleiche Farbe
4. Nicht als Buttons — Badges sind informativ, nicht interaktiv