# Toast

> Stacked notifications that fan out on hover, swipe to dismiss, and track promises.

Component · Free · https://lodeui.com/components/toast

## When to use

- Brief confirmation after an action: saved, sent, copied.
- Async results with toast.promise.

## When not to use

- Errors that block progress: show them inline.
- Anything people must act on later: use a notification center.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/toast.json
```

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
// app/layout.tsx: render once
import { Toaster } from "@/components/ui/toast";
// <body>{children}<Toaster /></body>

// anywhere
import { toast } from "@/components/ui/toast";

toast.success("Invite sent");
toast.promise(save(), { loading: "Saving…", success: "Saved", error: "Couldn't save" });
```

## API reference

### Toaster

Renders the stack. Place once near the root.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| position | `"bottom-right" \| "bottom-center" \| "top-center"` | `"bottom-right"` | Where toasts appear. |

### toast

Shows a toast from anywhere. Returns its id.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| toast(title, opts?) | `function` | – | Neutral toast. Also toast.success, toast.error and toast.promise. |
| opts | `{ description?, duration?, action?: { label, onClick } }` | – | Body text, timeout (ms) and an action button. |

### dismiss

Removes a toast by id.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| id | `number` | – | Returned by toast(). |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach the action and close buttons |

## Accessibility

- Each toast is role="status" with aria-live="polite".
- Timers pause while hovered so people can read and act.

## Motion

- Toasts stack with scale offsets and fan out on hover.
- Drag sideways more than 80px to dismiss.

## Responsive behavior

- Width is min(352px, 100vw − 32px).

## Performance

- A tiny module store; at most six toasts kept.

## Notes for AI

- Render <Toaster /> once in the root layout, not per page.

## Related

- [Alert](https://lodeui.com/components/alert) — Inline alerts and page banners in four tones, with actions and dismiss.
- [Action button](https://lodeui.com/components/action-button) — A button that morphs through saving, saved and failed, right where you clicked.