Feedback
Toast
Toast is a transient floating notification for confirming actions or reporting short-lived events.
Type — 4 variants
betaReact AvailableFigma AvailableDocs Partial
- React last updated
- 2026-07-11
- Documentation last updated
- 2026-06-01
- Accessibility target
- WCAG 2.2 AA (target)
- Version
- 0.3.0-beta
Known open questions
- Undo action pattern pending Figma confirmation for Toast action slot.
Live preview
Transient notifications appear in the viewport without stealing focus.
Trigger toasts
Purpose
A temporary, floating notification confirming an action or reporting a transient event, typically auto-dismissing after a few seconds.
Anatomy
Toast = viewport + queued toast surfaces with title/description, close, optional action.
Variants and states
info · success · warning · error
When to use
"Changes saved," "Item deleted" (with Undo), connection errors.
When not to use
Persistent, content-related messages — use Alert. Anything requiring a user decision — use Dialog.
Accessibility
role="status" and aria-live="polite"; must not steal keyboard focus when it appears.
Keyboard behavior
Close button is focusable. Escape dismisses focused toast when supported. New toasts do not move focus.
Common mistakes
Making the auto-dismiss timer too short for the message length.
Properties
Type as variants. Message (text), Show action (boolean) + Action (text), Show close (boolean).
When should a Toast remain visible?
Keep Toasts visible long enough to read the message. Critical persistent errors belong in Alert, not Toast.
Tokens used
semantic/surface/defaultsemantic/feedback/infosemantic/feedback/successsemantic/action/primary
Component API
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "info" | "success" | "warning" | "error" | "info" | Status variant. |
| title | string | — | Optional toast title. |
| duration | number | 5000 | Auto-dismiss ms. Set 0 to persist. |
| announce | "polite" | "assertive" | "polite" | Live region politeness. |
React example
Copy React example
"use client";
import { ToastProvider, useToast } from "@/components/ui/ToastProvider";
import { Button } from "@/components/ui/Button";
function Demo() {
const { toast } = useToast();
return (
<Button onClick={() => toast({ type: "success", title: "Saved", description: "Changes were saved." })}>
Save
</Button>
);
}
export function Example() {
return (
<ToastProvider>
<Demo />
</ToastProvider>
);
}