Badge

Kompaktes Label für Status, Kategorien und Metadaten.

Wann nutzen

• Status-Hinweise (success, warning, destructive)
• Kategorien und Tags (default, outline)
• Hervorhebung ohne Klick (primary, secondary)

Wann nicht

• Klickbare Aktionen (dafür Button)
• Fließtext (dafür Text)
• Große Inhaltsblöcke (dafür Card)

Variants

Default Primary Secondary Destructive Success Warning Outline

Props

Prop	Typ	Default
variant	default | primary | secondary | destructive | success | warning | outline	default
class	string	—

Verwandte Komponenten

Button · Text

Anti-Patterns

• Badge nicht als Button mit onclick missbrauchen
• Keine erfundenen variant-Werte
• Keine text-gray-* Utilities, semantische Tokens nutzen

Usage

---
import Badge from '@addxion/components/Badge';
---

<Badge variant="success">Active</Badge>

Truths

ID	Wahrheit
T-PKG-NEON	Consumer-Einstieg: @addxion/neon, nicht @addxion/core
T-NEON-BRAND	Markenwerte in Consumer brand.css

Für Agents

Scope: Neon Badge-Komponente — API und Verwendung.

• Aus @addxion/neon/react importieren
• Styling über Tokens, keine Ad-hoc-Farben in Consumern