Toast Notification
also known assnackbar · notification toast · transient notification · flash message
A small, transient message that appears at the edge of the screen to confirm an action or surface a status update.
A toast is a non-blocking, time-limited notification that slides into a corner of the viewport, displays for 3–6 seconds, then dismisses itself. Unlike a modal, it never interrupts the user's flow — they can keep working while the toast is visible.
Toasts are typed: success (green), error (red), info (blue), warning (amber). Each type uses a small color accent — usually a left border or a leading dot — never a fully tinted background. Modern toasts stack vertically when multiple appear simultaneously, with the newest on top or bottom depending on the anchor.
The pattern is essential for any app where users perform actions that need feedback but don't justify stopping the page. Save confirmations, sync status, error recovery — all toast territory.
- Confirming background actions (saved, synced, copied)
- Surfacing recoverable errors with a retry option
- Connection / status changes (online, offline, syncing)
- Critical confirmations that need user acknowledgment — use a modal
- Persistent information — use an inline banner or status bar
- +Auto-dismiss after 4–6 seconds for non-critical messages
- +Make errors persistent until dismissed or actioned
- +Show a single accent color or icon, not a full color flood
- +Stack multiple toasts vertically with a small gap
- −Don't show more than 3 toasts at once — collapse the rest
- −Don't put critical CTAs in a toast — users might miss them
- −Don't anchor center-screen — corners only (top-right or bottom-right are standard)
People also ask
What's the difference between a toast and a snackbar?
They're effectively the same pattern with different naming traditions. 'Snackbar' originated in mobile-first design systems and usually anchors at the bottom; 'toast' is older desktop terminology and often anchors top-right. Behavior is identical: transient, non-blocking, auto-dismissing.
How long should a toast stay visible?
4–6 seconds for confirmations, longer (8–10s) for messages with an action button, and persistent (no auto-dismiss) for errors that require attention.