Toast notifications from the Kombai gallery: a publishing tool's sharing link message, a calendar app's saved RSVP and a recipe magazine's shared confirmation.
What is a toast notification?
A toast notification is a small message that slides in near the edge of the screen after something happens, like a save, a send or a delete. It says what happened in a few words, sometimes offers one action like Undo, and disappears after a few seconds. People never have to stop and answer it.
- It appears without taking focus, so people keep doing what they were doing.
- It carries one line of text and at most one action.
Toast notifications show up across success, loading, waitlist and demo booking screens.
When to use a toast notification
- Confirming an actionSaved, sent, copied or invited, said in a few words.
- Offering UndoArchive or delete right away, and let people take it back.
- Background progressAn upload started or an export finished while people kept working.
When not to use one
- Errors people must fixShow form errors next to the field, where they stay put.
- DecisionsIf people have to choose, use a dialog.
- Anything people need laterToasts vanish. Keep important detail on the page or in an inbox.
Anatomy of a toast notification
This one works. Archive a thread to raise a toast, press Undo to bring it back, or leave it and watch it close. Hovering or focusing the toast pauses its timer.
Inbox
- Glaze order is inTeo Marchetti
- Studio keys for the weekendDara Okonjo
- Invoice INV-2041Halden Ferris
- Success
- With an action
- In progress
- Error
- ContainerFloats at the bottom edge
- IconShows the kind of message
- MessageWhat happened, in a few words
- ActionOptional, like Undo
- Close buttonDismiss before it times out
- StatesSuccess, action, progress, error
Toast notification variants
We sorted every toast notification design in the Kombai gallery and found six patterns. Browse all 50 web and 30 mobile designs.
1. One-line confirmations
A dark pill with a few words, like Copied or Share link ready to paste, that fades out on its own.
2. Undo toasts
Delete, dismiss or clear right away, with an Undo, Restore or Revert button in the toast.
3. Toasts with detail
A bold title and a second line that adds who or what, like the guest who was invited.
4. Success toasts
A check icon, often green, that says something saved or went live.
5. Progress toasts
Work that is still running, like applying a cover, starting an upload or queueing a draft.
6. Top toasts
On phones, some toasts drop in under the status bar instead of rising from the bottom.
Where toast notifications show up
Sharing and copying
Links copied to the clipboard, with nothing else on screen to show it worked.
Publishing and settings
A session, a policy or an automation saved and live, without leaving the editor.
Feedback and reports
A thank-you after people rate, flag or report something.
Removing items
A rule, a quiz or an alert removed from a list, confirmed without a dialog.
Toast notification vs similar components
Build notes
- Put toasts in a role="status" region. It is polite by default, so screen readers announce it without moving focus.
- Don't move focus to a toast. It should never pull people out of what they are doing.
- Keep it to one short line and at most one action, like Undo, View or Retry.
- Pause the timer while the toast is hovered or focused, and keep Undo reachable in the page too.
- Show it near the bottom edge, above the tab bar and any floating button, not on top of them.
- Use an inline error message, not a toast, for a problem people have to fix.
FAQ
What's the difference between a toast and a snackbar?
They are the same idea. Material Design calls the in-app version a snackbar: a brief message near the bottom of the screen that can carry one action, like Undo or Retry. Android keeps the name Toast for system-level messages shown outside the app.
How long should a toast stay on screen?
Long enough to read the message comfortably. A toast with an action should stay until people use it or close it, the way Android offers an indefinite length for snackbars that need dismissing.
Can a toast show an error?
For a background job that failed, yes, with a Retry button, like a failed upload. For a mistake in a form, no: show the error next to the field, where it stays until it is fixed.
Are toast notifications accessible?
They can be. WCAG asks for status messages that screen readers announce without moving focus, which role="status" does. Give action toasts enough time, and never make a toast the only way to undo.
Related terms
All glossary terms · Browse 50 web and 30 mobile toast notification designs