# Toast

A short confirmation that rises from the bottom right and leaves on its own: success, error, warning, info, **undo** and progress. Built as Sonner in the app.

- **Group:** Status and feedback · **family:** `status-feedback` · **shadcn:** Sonner
- **Build:** shadcn `sonner` (`<Toaster position="bottom-right" />`), styled with the kit `.toast` anatomy.
- **In apps/admin today:** Not in apps/admin.
- **Client component:** yes. 

## Content rules

- Past tense fact: "Published to 2 brands", "Price list deleted".
- Undo label is just "Undo".

## Do

- Use undo instead of a confirm for reversible deletes.

## Don't

- Put a form or a choice in a toast.
- Toast an error that needs reading; use an Alert.

## Motion

- In: opacity + `translateY(8px → 0)` on `--motion-toast-in` (200ms, `--ease-in`).
- Out: `--motion-toast-out` (140ms, `--ease-out`).
- Stack: older toasts scale to .96 / .92 and rise 8 / 16px; hover expands the stack.

## Accessibility

- **ARIA:** Region `role="status"` `aria-live="polite"`; errors use `aria-live="assertive"`.
- **Keyboard:** F8 focuses the toaster (Sonner default); Escape dismisses the focused toast.
- **Focus:** Never steals focus; dwell pauses while hovered or focused.

## Tokens

`--toast-shift` `--motion-toast-out` `--motion-toast-in` `--r-control` `--popover` `--popover-foreground` `--border` `--e-toast` `--success` `--destructive` `--warning` `--info` `--foreground` `--w-semibold` `--text-micro` `--muted-foreground` `--s-2` `--control-h-m` `--s-3` `--primary` `--s-4` `--s-8` `--s-1`

## Files

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