# Badges

Small inline labels for status, counts, and metadata. Pill-shaped by default. Reference: `kdcvault/frontend/src/components/ui/badge.tsx`.

## Anatomy

See `anatomy.svg`. Optional leading dot or icon · label · `rounded.full` shape · 22px default height.

## Variants

| Token | Use | Background | Text |
|-------|-----|------------|------|
| `badge.default` | Neutral tag | `brand.primarySoft` | `brand.primaryHover` |
| `badge.success` | Positive status | `semantic.successSoft` | `semantic.success` |
| `badge.warning` | Caution / attention | `semantic.warningSoft` | `semantic.warning` |
| `badge.danger` | Failure / blocked | `semantic.dangerSoft` | `semantic.danger` |
| `badge.outline` | Inline tag w/o fill | transparent | `text.muted` + `border.default` |
| `badge.solid` | High-emphasis count | `brand.primary` | `text.inverse` |

## Sizes

| Size | Height | Padding | Typography |
|------|--------|---------|------------|
| `sm` | 18px | `0 6px` | `caption` |
| `md` (default) | 22px | `2px 10px` | `caption` |
| `lg` | 26px | `4px 12px` | `bodyS` |

## Tokens used

`components.badge.*`, `colors.semantic.*Soft`.

## Accessibility

- Decorative badges don't need ARIA, but status badges should set `role="status"` and include a text label (not colour alone).
- Counts greater than 99 should render as `99+`.

## Do / Don't

- ✅ Pair colour with text or an icon to convey status.
- ❌ Don't stack more than two badges in a row — fold them into a single chip group instead.
- ❌ Don't use `badge.solid` for ambient counts; reserve it for active selections.