Toast

Preview

Short notifications that stack in a corner and dismiss themselves, with one optional action.

// Mount once, anywhere in the app
<Toaster />

// Then call toast() from anywhere. Reusing an id replaces the toast in place.
toast({ id: 'export', title: 'Exporting…', duration: Infinity });
// … later
toast({
  id: 'export',
  title: 'Report exported',
  description: 'revenue-q3.pdf',
  tone: 'success',
  action: { label: 'Undo', onClick: undo },
});

toast({ title: 'Sync failed', description: 'Retrying in 30 s.', tone: 'error' });

Usage

toast() returns an id; toast.dismiss(id) closes one and toast.dismiss() closes all. Toasts auto-dismiss after 5 seconds unless you set duration, and at most three show at once. Toast is the surface alone, and createToastStore() gives a separate store for a second Toaster.

Props

toast(options)

PropTypeDefaultDescription

titlerequiredReactNode——

descriptionReactNode——

action{ label: ReactNode; onClick: () => void }—One action button, e.g. Undo or Copy link. Clicking it also dismisses the toast.

tone'neutral' | 'success' | 'info' | 'warning' | 'error'ToastTone——

durationnumber—Auto-dismiss after this many ms (default 5000). Infinity keeps it until dismissed.

idstring—Reuse an id to replace a toast in place (e.g. "Exporting…" → "Exported").

Toaster

PropTypeDefaultDescription

maxnumber3Most toasts shown at once; older ones wait (default 3).

labelstring'Notifications'Names the notification region (default "Notifications").

storeToastStoretoastStoreA store from createToastStore(); defaults to the one behind toast().

Accessibility

The Toaster is a polite live region named by label (Notifications).
The action and the close button are ordinary buttons reachable by keyboard.
Do not put the only path to something important in a toast; it disappears. Use duration={Infinity} for messages that need an answer.

Report an issueBuilt Oct 21, 2026