Toast shows a brief, non-blocking notification to confirm an action or present temporary information. Use it for scenarios where the user needs feedback but not a decision, such as saving, deleting, or changing a status.
For production use, prefer the useToast() hook; it handles positioning, stacking, auto-dismiss, and deduplication via ToastViewport. The Toast component renders the visual toast element inline and is useful for previews, documentation, and static showcases where the viewport lifecycle is not needed.
ts
| Guidance | Practices |
|---|---|
| Do | Keep messages short: only a few words that tell the user what happened, like "Changes saved" or "Message sent". |
| Do | Add an undo action in the endContent slot for reversible operations like deleting an item, so the user can recover without navigating away. |
| Do | Use uniqueID to deduplicate toasts that fire from repeated actions, like clicking a save button multiple times. |
| Do | Use error type for failures that need attention but not immediate action; it persists until dismissed so the user won't miss it. |
| Don't | Don't use a toast for critical errors that block the user. Use Banner for persistent, in-context messaging that requires acknowledgment. |
| Don't | Don't put long or multi-line content in a toast; it disappears after 5 seconds and the user may not finish reading. |
| Don't | Don't show form validation errors as toasts. Use inline field validation so the user can see exactly which field needs fixing. |