Toast
A transient confirmation that something happened — copied, saved, removed. Fires from an event via the useToast hook, not from render.
import { Toast, ToastProvider } from '@/components/ui/Toast';Source: src/components/ui/Toast.tsx
Examples
The four variants
Same contrast treatment as Alert. Click any of these.
Props
<Toast> props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'success' | 'error' | 'warning' | 'info' | 'info' | — |
onDismiss | () => void | — | — |
childrenrequired | ReactNode | — | — |
<ToastProvider> props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | — | — |
Accessibility
- Rendered in a live region, so it is announced without stealing focus.
- Because it vanishes, it must never be the only place a message appears.
Usage
Do
- Use it for the outcome of an action the user just took.
- Keep it to one short sentence — it disappears, so nothing important can live only here.
Don’t
- Don’t report a validation error in a toast. The error belongs next to the field, where it stays.
- Don’t queue several at once for one action.
Related:Alert