Toast
Preview appears after the next Storybook update.
<Toast />When to use
Use it for
- Confirming an action the user just took, especially when its result is not visible on screen: Copied, Published, Invitation sent.
- Offering a quick reversal: Token deleted, with Undo.
- Background work that finishes later: toast.promise() shows loading, then success or error.
Not for
- Information the user must read or act on to continue: use an inline Alert or an AlertDialog.
- Errors in a form: show them next to the fields.
- Anything that needs more than one action or a long explanation.
Do and don't
Every example is rendered with the real component, so it always matches what ships.
Use the verb of the action, in the past tense
The button said Publish, the toast says Published. The vocabulary follows the flow.
Offer Undo for destructive actions
A toast with an action stays until the user acts or dismisses it, so nobody misses the way back.
A toast for every click
If the result is visible on screen, the screen already confirms it.
Accessibility
- Toasts render in a labelled region ("Notifications") that users reach with F6. Hovering or focusing the stack expands it and pauses auto dismiss.
- Titles and descriptions are announced through a live region: politely by default, assertively for danger (priority high).
- Toasts with an action, loading toasts and danger toasts from promise() do not auto dismiss, so screen reader and keyboard users have time to act.
- Close and action buttons are real buttons with names; the close button is labelled "Dismiss notification".
- Swipe right or down dismisses on touch. Under reduced motion toasts appear and leave without sliding.
Content guidelines
- Title: the outcome, two to four words: "Tokens published".
- Description only when it adds something: what changed or what to do next.
- Action labels are one verb: Undo, View, Retry.
- No "Success!" or "Oops". No exclamation marks.
From the code Generated from the component, not editable here.
Anatomy and tokens
Read from packages/react/src/components/Toast/Toast.module.css at build time. Every value is a token: open one to see its alias chain in both themes.
- Fixed region, bottom end
.viewport - Fixed region, bottom end
@media (min-width: 640px) .viewport - Toast container (stacked)
.toast - Toast container (stacked)
.toast[data-ending-style] - Toast container (stacked)
.toast::after - Toast container (stacked), focus
.toast:focus-visible - info
.info - success
.success - warning
.warning - danger
.danger - Content row
.content - Tone icon or spinner
.icon - Text column
.text - Title
.title - Description
.description - Action button
.actions
Motion and interaction
Toast has motion in code that this page cannot list yet (it is shown from a hook or a provider, not placed as a component): try it in the preview.
With reduced motion turned on, its changes happen at once.
From the code Generated from the component, not editable here.
Props
Parsed from the TypeScript types in packages/react/src/components/Toast/Toast.tsx, so this table cannot drift from the code.
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | ReactNode | none | One short line: what happened. "Tokens published". |
description | ReactNode | none | Optional detail: what changed or what to do next. |
tone | 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'loading' | none | Icon and meaning. Default `neutral`. `loading` shows a spinner and never times out. |
action | ToastAction | none | One action, for example Undo. Toasts with an action stay until dismissed or acted on. |
timeout | number | none | Milliseconds before auto dismiss. `0` keeps it until closed. Default 5000 (0 with an action or for loading). |
priority | 'low' | 'high' | none | `high` interrupts screen readers (assertive). Default `high` for danger, `low` otherwise. |
id | string | none | Reuse an id to update a toast in place. |
onClose | () => void | none | Called when the toast closes (timeout, swipe, close button or action). |
Comes with useToast, ToastProvider, each accepting native <div> attributes.
Playground
Toast has no typed options to play with: it is a container. Compose it with useToast, ToastProvider and any native attribute. Here it is in both themes.
Workbench
For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open Toast in Storybook).
Embed Storybook stories here (3)
Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay empty.
Tones
UndoAction
AllStates
From the code Generated from the component, not editable here.
Changelog
- New
Feedback: Alert (five tones, actions, dismiss, correct live region), Toast (ToastProvider and useToast with success, error, warning, info, promise, update and close), Progress (linear and circular, determinate and indeterminate), Skeleton, EmptyState, plus Spinner stories and guidance
v1.0.0, Nov 11, 2026