Toast

Brief notifications queued from anywhere in the app: stacked, swipeable, with success, error, and loading states.

When to use

Use when: Brief feedback after an action, such as saved or copied.
Avoid when: The message needs action or must stay; use Alert or Dialog.

Installation

bunx shelf add toast

The source lands in src/components/ui/toast.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Examples

Success and error

An icon that matches the outcome of an action.

Action

An action button, such as undo.

Promise

Follows an async task from loading to done.

Built on

Packages: @base-ui/react, @stylexjs/stylex
Shelf items: Button, foundations, Icons, Spinner
Accessibility: Focus, keyboard, and ARIA behavior come from Base UI.
Figma: In progress. See Designers and Figma.