# Error states

Three sizes of failure: an inline error inside a panel, a partial failure that lists what failed and what worked, and a page-level error when the whole surface cannot load. Each names the real cause.

- **Group:** Status and feedback · **family:** `status-feedback` · **shadcn:** Alert
- **Build:** shadcn `Alert` (destructive) for inline; Next.js `error.tsx` for the page level.
- **In apps/admin today:** Alert exists; the patterns are new.
- **Client component:** yes. Next.js `error.tsx` boundaries must be client components (they receive `reset`).

## Content rules

- Cause, then fix: "Cloth sync failed: Holland & Sherry did not answer. Try again".
- Show the request id for support in Plex Mono.

## Do

- Keep what worked visible in a partial failure.

## Don't

- "Something went wrong".
- Blank the whole page when one panel failed.

## Accessibility

- **ARIA:** Inline errors raised by the person's action use `role="alert"`; errors on load use `role="status"`.
- **ARIA:** The technical box is selectable text with a Copy button.
- **Keyboard:** Try again is the first focusable element.
- **Focus:** After a retry, focus stays on the panel heading.

## Tokens

`--s-3` `--s-12` `--s-10` `--w-semibold` `--text-22` `--font-voice` `--font-stretch-title` `--tr-page` `--text-read` `--lh-read` `--w-regular` `--text-code` `--font-code` `--muted` `--border` `--r-card` `--s-4` `--muted-foreground` `--foreground` `--s-2` `--destructive` `--card` `--text-card` `--text-body` `--text-small` `--s-1` `--success` `--r-control` `--background`

## Files

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