Toast
StableA short, temporary notification that confirms what just happened (Tokens published, Link copied) without interrupting. Shown with useToast() under a ToastProvider.
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.
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
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 |
|---|---|---|---|
title required | 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
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. Adds alert and skeleton component tokens.
Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026
- New
Bridge token system v1. Adds a brand mapping layer (`bridge` default, `ocean` alternate) between primitives and semantic tokens, a component tier (button, input, checkbox, switch, slider, card, popup, dialog, tooltip, toast, table, tabs, progress, nav), comfortable and compact density, motion durations and easings with a reduced-motion override, layers (z-index), icon sizes, breakpoints, a 1.2 type scale from 14px with tracking tokens, and self-hosted IBM Plex Sans and Mono (`@bridge-ds/tokens/fonts.css`). Primitives are regenerated in OKLCH on one lightness ladder. The build now writes `dist/resolved.json` and fails when any pair in `contrast.checks.json` drops below its WCAG minimum in any brand and theme. Fixes `color.border.strong` against `color.surface.default` (now at least 3:1 in both themes).
Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026