The Badge directive attaches a small indicator to another element. Use it to show a count, dot, short text, or compact label on top of a button, icon, text, avatar, tab, or navigation item.
Use it for:
- Counts: Show unread messages, notifications, tasks, updates, or pending items.
- Small labels: Add very short text when the label belongs to a specific host element.
- Dot indicators: Use the small size when only presence of a state matters.
- Positioned context: Place the badge above, below, before, or after the host element with optional overlap.
Do not use Badge as a standalone block, long text label, avatar presence indicator, or full inline status pill. Use Chip, Avatar presence, Alert, or Announcement for those cases.