# Toast

> Frosted toasts for success, error, info and in-flight work, stacked as a deck that fans out on hover.

Category: Feedback. Docs page: https://rime.mjsons.net/components/toast

## Installation

```bash
npx shadcn@latest add KezLahd/rime/toast
```

Mount ToastProvider once in the root layout and call useToast(). success and info leave after 5 seconds with a timer rule; error and loading stay until dismissed or settled. toast.promise shows loading, then success or error when the promise settles.

## Usage

```tsx
import { useToast } from "@/components/ui";

const toast = useToast();
await toast.promise(save(), { loading: "Saving…", success: "Saved", error: "Couldn't save" });
```

## Examples

### The stack

ToastStackPreview draws the real stack in place, with no timers and no live region: loading, an error with an action, and a success.

```tsx
<ToastStackPreview
  expanded
  items={[
    { id: 1, tone: "loading", title: "Saving changes…" },
    { id: 2, tone: "error", title: "Couldn't send", description: "Check your connection.", action: { label: "Retry", onClick: retry } },
    { id: 3, tone: "success", title: "Invoice sent", description: "INV-1042 is on its way to Jane Cooper." },
  ]}
/>
```

### Tones

```tsx
toast.success("Invoice sent", { description: "INV-1042 is on its way to Jane Cooper." });
toast.error("Couldn't send", { action: { label: "Retry", onClick: retry } });
```

## Theme tokens

Per-component tokens. Undeclared by default: the default below is the fallback the CSS uses. Set any of them at :root or on a wrapper to restyle every instance.

| Token | Default |
| --- | --- |
| `--button-case` | `none` |
| `--button-size-sm` | `12.5px` |
| `--button-tracking` | `0` |
| `--toast-blur` | `blur(28px) saturate(180%)` |
| `--toast-icon-radius` | `var(--r-sm)` |
| `--toast-radius` | `var(--r-lg)` |
| `--toast-rgb-error` | `237, 93, 87` |
| `--toast-rgb-info` | `110, 84, 153` |
| `--toast-rgb-success` | `52, 168, 112` |
| `--toast-surface` | `rgba(var(--rgb-white), 0.82)` |

System tokens it reads: `--brand-gradient`, `--danger-ink`, `--density`, `--dur`, `--ease`, `--ease-out`, `--focus-ring`, `--font-body`, `--front-height`, `--index`, `--ink-brand`, `--ink-heading`, `--ink-muted`, `--ink-secondary`, `--line-brand`, `--line-brand-strong`, `--offset`, `--own-height`, `--r-lg`, `--r-sm`, `--r-xs`, `--rgb-brand-deep`, `--rgb-contact`, `--rgb-white`, `--success-gradient`, `--success-ink`, `--text-body`, `--text-small`, `--toast-duration`, `--wash-active`, `--wash-strong`, `--wash-subtle`, `--z-toast`.

## Accessibility

- The stack sits in a region labelled "Notifications" with a polite live list, and stays live while a Modal makes the rest of the page inert.
- Hover or focus inside fans the stack out and pauses every timer; toasts never take focus.

## Do

- Confirm what was done, with the record's name or reference.

## Don't

- Don't put the only copy of important information in a toast.