Toast Notification
A brief message that appears over the interface to confirm an action or report a problem, then disappears on its own.
UI ComponentsA toast is transient by definition: it shows up, it is not dismissed by the user, and it leaves. That makes it right for confirming something the user just did and wrong for anything they might need later. “Saved” is a toast. “Your subscription failed to renew” is not — it will vanish in four seconds while the user is reading something else, and the product will have technically told them.
Three rules keep toasts from becoming noise. One at a time, stacked and queued rather than overlapping. Long enough to read — five seconds minimum for anything past three words, and paused on hover. And announced to assistive technology through a live region, because a message that only exists visually for four seconds does not exist at all for a screen-reader user.
Toast vs alert vs banner
A toast is transient and floats over the page — use it to confirm. An alert is persistent and sits where the problem is — use it when something needs attention until it is resolved. A banner spans the top of the page and covers conditions affecting everything below it — degraded service, expiring trial.
In practice
A logistics dashboard confirmed bulk imports with a toast: “Import complete”. Rows that failed validation were listed in the same toast, which disappeared. Operators discovered missing shipments days later. Replacing it with a toast for success and a persistent panel listing failed rows — downloadable as CSV — removed a recurring class of data problem entirely.
Where teams get it wrong
- Putting information the user needs later in a message that removes itself.
- Stacking several toasts so they cover the action the user is trying to take next.
- Toasts with an action button and a four-second lifetime — nobody reads and clicks that fast.
- No live region, so screen-reader users get nothing at all.
- Toasts in the bottom-right corner on mobile, under the thumb and over the primary button.
Learn more
You may ask
Frequently Asked Questions
How long should a toast notification stay on screen?
At least four to five seconds for a short message, longer for anything with more words, and paused while the pointer is over it. If the content matters enough to need more time than that, it should not be a toast.
What is the difference between a toast and a snackbar?
Nothing meaningful — “snackbar” is the Material Design name for the same pattern. Some systems reserve “snackbar” for messages carrying an action such as Undo.
Are toast notifications accessible?
Only if implemented with an ARIA live region so the text is announced, given enough time to be read, and never used as the sole channel for important information. A purely visual toast is invisible to screen-reader users.
Related terms
All terms- AlertAn in-page message about something needing attention — persistent, placed where it applies, and gone only when the condition is.
- BannerA full-width message at the top of a page or app, for conditions that affect everything below it.
- Error StateWhat an interface shows when something failed — which system failed, whether the user's work survived, and what they can do next.
- Status IndicatorA persistent signal of a system or record's current condition — distinct from a message about something that just happened.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us