# Badge

Ein Badge stellt kompakt zusätzliche Informationen wie Metadaten, Status oder Kategorien dar. Es unterstützt die schnelle Orientierung, ohne vom Hauptinhalt abzulenken.

## Guidelines

# Grundlagen

## Best practices

Achte bei der Verwendung eines Badges darauf, dass ...

- die Beschreibung kurz und prägnant ist (idealerweise in 1–3 Wörtern).
- die Farben konsistent für bestimmte Informationen verwendet werden.
- mithilfe eines Scopes dem Badge eine übergeordnete Bezeichnung hinzugefügt
  wird.
- diese für Metadaten und Kategorien verwendet wird. Bei kritischere
  Informationen wird eher eine
  [AlertBadge](/04-components/status/alert-badge/overview) in Kombination eines
  [Alert](/04-components/status/alert/overview) verwendet.

## Verwendung

Verwende einen Badge, um ...

- Metadaten hervorzuheben (z. B. Bezahlt, Überfällig, Entwurf).
- einen Status zu kennzeichnen (z. B. Aktiviert, Deaktiviert).
- eine Kategorie oder Zugehörigkeit darzustellen (z. B. Support, Marketing,
  Entwicklung).
- wichtige Änderungen und Neuerungen hervorzuheben (z. B. Neu, Beta, Update).
- Prioritäten zu kennzeichnen (z. B. Priorität: Hoch, Priorität: Mittel,
  Priorität: Niedrig).
- gesetzte Filter in der [List](/04-components/structure/list/overview)
  darzustellen.

## Badge vs. AlertBadge

  

- Metadaten oder ergänzende Informationen dargestellt werden sollen.
    - keine sofortige Aktion oder erhöhte Aufmerksamkeit notwendig ist.

   

- der Hinweis kritisch, sicherheitsrelevant oder besonders wichtig ist.
    - weitere Informationen durch einen [Alert](/04-components/status/alert/overview) notwendig sind.