# CounterBadge

Ein CounterBadge dient dazu, dem User schnell und kompakt auf neue oder ungelesene Inhalte hinzuweisen.

## Guidelines

# Grundlagen

Ein CounterBadge zeigt auf einen Blick, dass es etwas Neues oder Wichtiges gibt
– zum Beispiel ungelesene Nachrichten, Hinweise oder Aufgaben. Er wird meist
dezent an [Tabs](/04-components/navigation/tabs/overview),
[Icons](/04-components/content/icon/overview) oder anderen UI-Elementen
platziert und hilft dabei, die User gezielt durch die Oberfläche zu führen.

## Best practices

Achte bei der Verwendung einer CounterBadge darauf, dass ...

- der Kontext klar ist. Ein CounterBadge sollte sich eindeutig auf ein Element
  beziehen (z. B. einen [Button](/04-components/actions/button/overview) oder
  Tab).
- keine Überlagerungen stattfinden. Vermeide zu viele Badges auf engem Raum, um
  eine kognitive Überforderung zu verhindern.
- die Position konsistent bleibt. Die CounterBadge steht immer rechts oberhalb
  oder mittig an einem Element.
- ein CounterBadge per Default eine weiße Kontur besitzt, um auf farbigen
  Hintergründen ausreichend Kontrast und gute Lesbarkeit zu gewährleisten.

## Verwendung

Verwende ein CounterBadge, um ...

- auf neue und ungelesene Nachrichten hinzuweisen.
- die Anzahl von Elementen anzuzeigen, zum Beispiel bei offenen Tickets.
- visuell auf Hinweise oder Warnungen innerhalb eines Navigationselements (z. B.
  Tabs oder Menüpunkte) aufmerksam zu machen.