Toast

A React component in Beamline's Overlays category, in the free sample.

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).
Anything people must read later (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
`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

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 · Connect your agent