# Status chip

The square badge that says what state a thing is in: dot plus label on a 12% soft fill. One vocabulary for the whole admin, owned by status-feedback; catalogue items are always Draft, Available or Retired.

- **Group:** Status and feedback · **family:** `status-feedback` · **shadcn:** Badge
- **Build:** shadcn `Badge` with status variants (draft, available, retired, info, success, warning, danger, locked, ended, unmapped) and `size` sm | lg.
- **In apps/admin today:** `ui/badge.tsx` exists (rounded-md pill, zinc variants). Rework to the 4px square chip with dot and soft fill.
- **Client component:** no. 

## Content rules

- Catalogue: Draft, Available, Retired (+ version: "Available v4").
- Payment: Awaiting payment, Paid, Payment failed. Fulfilment: Awaiting, In production, Shipped (info blue, not green), Delivered. Refunded is neutral.
- ERP: In sync, Retrying, ERP failed, "3 stuck", Not read. Support: Open, Re-opened, Waiting on us, Resolved; severity Low / Medium / High.
- Campaign: Draft, Scheduled, Live, Ended. Refund request: Raised, In review, Cleared, Declined.
- Two words at most; sentence case; no full stop.

## Do

- Use the exact vocabulary from status-feedback.
- Put the version next to the catalogue state when it matters ("Available v4").

## Don't

- Red for Refunded or Ended.
- Green for Shipped.
- Invent a new state name for one page.

## Accessibility

- **ARIA:** The text label carries the meaning; colour is never the only signal.
- **ARIA:** A chip that changes live sits inside `aria-live="polite"` (e.g. sync state).
- **Keyboard:** Not focusable.
- **Focus:** None.

## Tokens

`--s-2` `--r-chip` `--w-semibold` `--text-micro` `--font-voice` `--neutral` `--status-soft-alpha` `--draft` `--available` `--retired` `--info` `--warning` `--destructive` `--locked` `--muted` `--chip-h-lg` `--text-btn-sm` `--font-code` `--w-medium` `--text-11` `--font-ui` `--background` `--success` `--muted-foreground` `--not-wired` `--r-control` `--s-3` `--text-small` `--foreground`

## Files

`status-chip.html` live specimen · `status-chip.css` kit rules · `status-chip.d.ts` props · full page: `docs/components/status-chip/` (phone: `m/`).