Toast
轻提示
Aliases:消息提示条吐司轻提示通知条snackbar自动消失提示右下角弹出的小提示
What is it
A small message bar that appears in a viewport corner and dismisses itself, reporting an operation result (saved, copied, upload done). Non-blocking, usually with one action (undo, view), lingering for about 3–5 seconds before fading out.
Name disambiguation
A toast (snackbar) is brief non-blocking feedback that auto-dismisses. Alerts persist. Modals interrupt. Never put essential info in a toast.
Interactive playground
Try it. Make an informed choice.Trigger notifications and compare timeout and manual dismissal.
Loading lab…
What to look for
- 01Do not steal focus; preserve important outcomes in the page.
- 02Allow enough time to read and use notification actions.
✓ When to use
- Lightweight feedback: success, status updates
- Paired with undo after light destructive actions
- Notify finished background tasks (upload, export)
✕ When not to use
- Errors that must be seen and handled — use an alert or inline form errors
- Long or queued messages — use a notification center
- A user decision is required — use a modal
Variants
Success
成功
Status dot or check icon
Error
错误
Danger colour, lingers longer or needs manual dismiss
Action
带操作
Carries an undo or view button (snackbar style)
Implementation
position: fixedz-indextransform: translateYanimationPin to the bottom-right (or bottom-center); enter and exit with slide + fade using transforms only to avoid reflow; stack multiple toasts. Pause the auto-dismiss timer on hover. Error toasts may linger longer or require manual dismissal; respect prefers-reduced-motion.
Platform API
role="status"aria-live="polite"In code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| ARIA | role="status" |
| shadcn/ui | Sonner / Toast Sonner is the default toast in the shadcn ecosystem |
| MUI | Snackbar |
| AntD | message / notification |
Compare
Full comparison →| Toast轻提示 | Alert警告提示 | Form Validation表单校验 | |
|---|---|---|---|
| Interruption | Low — brief and non-blocking | Medium — visible in the flow, not blocking | Low — inline errors, typing flow preserved |
| Persistence | Low — auto-dismisses in seconds | High — persists until resolved or dismissed | High — error persists beside the field until fixed |
| Error pinpointing | Poor — no field-level context | Medium — explains cause and scope | Pinpoints the exact field and reason |
Related concepts
An inline, status-coloured banner inside the page flow for messages that must be seen: errors, warnings, important notices. It takes layout space instead of overlaying, and stays until the issue is resolved or the user dismisses it.
ComponentsAlternativeA dialog rendered above the page with a translucent backdrop that interrupts the current flow and demands a task or decision first. The backdrop blocks interaction with the underlying page and focus is temporarily trapped inside — the most disruptive of the overlay containers.
ComponentsSimilarA short notice slides in from a screen edge — bottom or top-right — lingers a few seconds, then slides back out. Three phases: enter, hold, exit; it always returns toward the edge it came from.
MotionUsed withHandles risky actions with "apply first, allow regret": deletions take effect immediately and show the result, while a snackbar with a countdown offers one-tap undo until the timer expires. Unlike confirmation dialogs it never interrupts the flow, and unlike a single confirm it leaves a real window to change one's mind.
PatternsUsed withNot to be confused with
Alert persists and may carry actions; a toast is brief at a corner.
A tooltip explains a control; a toast reports a system event.