# Alert and banner

An inline message block (Alert) or a full-width strip under the top bar (Banner). Six kinds: info, success, warning, danger, **locked** and **not wired** (the feature exists but the backend is not connected).

- **Group:** Status and feedback · **family:** `status-feedback` · **shadcn:** Alert
- **Build:** shadcn `Alert` with variants info, success, warning, destructive, locked, notWired; `Banner` is a full-width Alert variant.
- **In apps/admin today:** `ui/alert.tsx` exists (default + destructive). Add the four kinds, the tint and the dashed not-wired edge.
- **Client component:** no. 

## Content rules

- Title: the fact ("Cloth sync failed"). Body: the cause and the fix ("Holland & Sherry did not answer. Try again in a minute.").
- Not wired: "Not connected yet" + what will happen when it is.
- Locked: who can change it ("Only HQ can change brand currency").

## Do

- Name the real cause.
- Use not wired honestly rather than faking data.

## Don't

- "Something went wrong".
- Stack more than two alerts; summarise instead.

## Accessibility

- **ARIA:** `role="alert"` only for danger raised by the person's own action; otherwise `role="status"`.
- **ARIA:** The icon is decorative (`aria-hidden`); the title states the kind in words.
- **Keyboard:** Actions inside are ordinary buttons.
- **Focus:** Do not move focus to an alert; a validation summary is the exception (see Step validation).

## Tokens

`--info` `--s-3` `--s-4` `--r-card` `--success` `--warning` `--destructive` `--locked` `--muted` `--secondary-border` `--not-wired` `--w-semibold` `--text-card` `--font-voice` `--font-stretch-title` `--foreground` `--text-body` `--lh-body` `--s-1` `--muted-foreground` `--s-2` `--s-10` `--w-medium` `--motion-toast-out` `--s-5`

## Files

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