# Badge

The `Badge` component is a small, non-interactive visual indicator used to display the status of an entity or feature. It provides a quick, glanceable representation of state (e.g. Draft, Error). `Badges` are short, subtle, and reinforce meaning without overwhelming other UI elements.

### ✅ Do's

---

- Use `Badges` for short, clear status labels (e.g. Active, In progress, Done, …)
- Select the variant that matches semantic meaning (e.g. `positive` for success, `critical` for errors)
- Choose an appropriate size depending on context (list, card, inline)
- Use the status indicator or icon for additional visual clarity when needed

### ❌ Don'ts

---

- Don’t use `Badges` for long sentences (e.g. “This product is temporarily unavailable”)
- Don't make badges clickable as they are not `Buttons` or `Links`. However, showing a `Tooltip` on hover is allowed.
- Don’t overload screens with too many badges, they lose effectiveness
- Don’t rely on color alone to convey meaning, use text and/or an icon for clarity