# Toast

A React component in [Beamline](https://beamline.io/)'s [Overlays](https://beamline.io/components/overlays) category, in the free sample. Live demo: https://beamline.io/components/toast

Short results of an action stacked at an edge: point at the stack to fan it out and pause the timers; undo or retry in place; Alt+T, Escape and a swipe for the keyboard and touch.

## Use it for

- Brief results of an action: saved, sent, failed with retry, undo, a long task finishing.

## Not for

- Errors that need fixing (inline error or [alert](https://beamline.io/components/alert)).
- Anything people must read later ([notification-center](https://beamline.io/components/notification-center)).

## Anatomy

- ToastStackProvider
- ToastStack (region)
- card: icon, title, description, action
- dismiss button
- useToastStack(): toast, update, dismiss

## Variants

- **type**: success, error, warning, info, loading
- **position**: bottom-right, bottom-left, bottom-center, top-right, top-left, top-center

## States

- entering
- front
- behind (peeking)
- fanned out
- paused
- leaving
- swiping

## Keyboard

- Alt+T focuses the newest toast
- Tab moves through toasts and their actions
- Escape dismisses the focused toast

## Motion

Cards arrive from the edge and fan out on --pui-ease-drawer over --pui-duration-considered; leaving fades over --pui-motion-out; reduced motion makes both instant.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `toast(input)` | `{ id?, type?, title, description?, action?: { label, onClick }, duration? } → id` | — |  |
| `update(id, patch)` | `Partial<ToastInput>` | — |  |
| `dismiss(id?)` | `string` | — |  |
| `position` | `ToastPosition` | `"bottom-right"` |  |
| `contained` | `boolean` | `false` |  |
| `visibleToasts` | `number` | `3` |  |
| `hotkey` | `boolean` | `true` |  |
| `style / ref` | `CSSProperties / native Ref` | — |  |
| `classNames` | `ToastStackClassNames` | — |  |

## Dependencies

`lucide-react`

## Import

```tsx
import { ToastStack } from "@/components/toast/toast";
```

## Get it

Toast is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Toast is in the free sample, which costs nothing. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Overlays

- [Alert Dialog](https://beamline.io/components/alert-dialog): A blocking confirmation that must be answered: the scrim does not dismiss it, focus starts on the safe choice, and an async action keeps it open until…
- [Bottom sheet](https://beamline.io/components/bottom-sheet): A phone panel that rests at a peek and follows the finger to full height; a flick down closes it, and the handle works from the keyboard.
- [Command menu](https://beamline.io/components/command-menu): Search-first list of every action: ranked matching, groups, keycap shortcuts and nested pages; inline as CommandPalette or in a ⌘K dialog as CommandMenu.
- [Context menu](https://beamline.io/components/context-menu): Actions for an object on right-click, long-press, Shift+F10 or the menu key, opened at the pointer, with the same rows as the dropdown menu.
- [Dialog](https://beamline.io/components/dialog): A focused task over the page (create, invite, rename) with a title, body and footer; focus moves in, is trapped and returns on close.
- [Dropdown menu](https://beamline.io/components/dropdown-menu): A list of actions behind a trigger, with shortcuts, check items, headings and submenus; one highlight glides under the pointer and jumps with the keyboard.
- [Hover card](https://beamline.io/components/hover-card): A preview of a person, link or record on hover or keyboard focus, without leaving the page; HoverCardProfile is the standard person preview.
- [Popover](https://beamline.io/components/popover): A small surface anchored to a trigger for a short form, a filter or an explanation; focus moves in and returns on close.
- [Sheet](https://beamline.io/components/sheet): A panel that slides in from an edge with the page still visible behind it: header and footer stay put while the body scrolls.
- [Tooltip](https://beamline.io/components/tooltip): Short supporting text for a control: opens after a moment on hover and at once on keyboard focus; inside a toolbar group the next one opens instantly.