--- title: "Toast notification UI: variants and examples | Kombai" description: "A toast notification is a brief message that confirms something happened, then goes away on its own without interrupting the task." canonical_url: https://kombai.com/glossary/toast-notification/ author: "The Kombai Team" --- # Toast notification A toast notification is a brief message that confirms something happened, then goes away on its own without interrupting the task. - Also called: toast, snackbar - Platforms: Web, Mobile - In the Kombai gallery: [50 web designs](https://kombai.com/gallery/web/toast-notification/), [30 mobile designs](https://kombai.com/gallery/mobile/toast-notification/) - [Emblewick](https://kombai.com/gallery/inspirations/toast-notification-web-44/) (Web) - [Hovena](https://kombai.com/gallery/inspirations/toast-notification-ios-17/) (Mobile) - [Maslin](https://kombai.com/gallery/inspirations/toast-notification-ios-28/) (Mobile) ## 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. ## When to use toast notification - **Confirming an action.** Saved, sent, copied or invited, said in a few words. - **Offering Undo.** Archive or delete right away, and let people take it back. - **Background progress.** An upload started or an export finished while people kept working. ## When not to use one - **Errors people must fix.** Show form errors next to the field, where they stay put. - **Decisions.** If people have to choose, use a dialog. - **Anything people need later.** Toasts vanish. Keep important detail on the page or in an inbox. ## Anatomy 1. **Container**: Floats at the bottom edge 2. **Icon**: Shows the kind of message 3. **Message**: What happened, in a few words 4. **Action**: Optional, like Undo 5. **Close button**: Dismiss before it times out 6. **States**: Success, action, progress, error ## Variants We sorted every toast notification design in the Kombai gallery and found six patterns. ### 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. - [Upvine](https://kombai.com/gallery/inspirations/toast-notification-ios-20/) (Mobile) - [Moorwell](https://kombai.com/gallery/inspirations/toast-notification-ios-7/) (Mobile) - [Elmhollow](https://kombai.com/gallery/inspirations/toast-notification-web-28/) (Web) ### 2. Undo toasts Delete, dismiss or clear right away, with an Undo, Restore or Revert button in the toast. - [Alderloop](https://kombai.com/gallery/inspirations/toast-notification-web-1/) (Web) - [Juneberry Lab](https://kombai.com/gallery/inspirations/toast-notification-ios-4/) (Mobile) - [Ironvault Markets](https://kombai.com/gallery/inspirations/toast-notification-ios-5/) (Mobile) ### 3. Toasts with detail A bold title and a second line that adds who or what, like the guest who was invited. - [Kinbrook](https://kombai.com/gallery/inspirations/toast-notification-ios-8/) (Mobile) - [Orrelane](https://kombai.com/gallery/inspirations/toast-notification-web-31/) (Web) - [Chalkwren](https://kombai.com/gallery/inspirations/toast-notification-web-25/) (Web) ### 4. Success toasts A check icon, often green, that says something saved or went live. - [Jarrowbeck](https://kombai.com/gallery/inspirations/toast-notification-web-49/) (Web) - [Yonderly](https://kombai.com/gallery/inspirations/toast-notification-web-27/) (Web) - [Nudgewire](https://kombai.com/gallery/inspirations/toast-notification-web-14/) (Web) ### 5. Progress toasts Work that is still running, like applying a cover, starting an upload or queueing a draft. - [Verglas](https://kombai.com/gallery/inspirations/toast-notification-ios-21/) (Mobile) - [Ilderloom](https://kombai.com/gallery/inspirations/toast-notification-web-48/) (Web) - [Foxbriar](https://kombai.com/gallery/inspirations/toast-notification-web-34/) (Web) ### 6. Top toasts On phones, some toasts drop in under the status bar instead of rising from the bottom. - [Turnleaf](https://kombai.com/gallery/inspirations/toast-notification-ios-18/) (Mobile) - [Palven](https://kombai.com/gallery/inspirations/toast-notification-ios-10/) (Mobile) - [Daylark](https://kombai.com/gallery/inspirations/toast-notification-ios-22/) (Mobile) ## Where toast notifications show up ### Sharing and copying Links copied to the clipboard, with nothing else on screen to show it worked. - [Ravlin](https://kombai.com/gallery/inspirations/toast-notification-ios-14/) (Mobile) - [Zephkiln](https://kombai.com/gallery/inspirations/toast-notification-web-40/) (Web) - [Jandrel](https://kombai.com/gallery/inspirations/toast-notification-web-9/) (Web) ### Publishing and settings A session, a policy or an automation saved and live, without leaving the editor. - [Wrentide](https://kombai.com/gallery/inspirations/toast-notification-web-21/) (Web) - [Vellbrook](https://kombai.com/gallery/inspirations/toast-notification-web-37/) (Web) - [Tamblewick](https://kombai.com/gallery/inspirations/toast-notification-web-36/) (Web) ### Feedback and reports A thank-you after people rate, flag or report something. - [Alderpost](https://kombai.com/gallery/inspirations/toast-notification-ios-2/) (Mobile) - [Norvale Help](https://kombai.com/gallery/inspirations/toast-notification-ios-13/) (Mobile) - [Pilverne](https://kombai.com/gallery/inspirations/toast-notification-web-45/) (Web) ### Removing items A rule, a quiz or an alert removed from a list, confirmed without a dialog. - [Zindlow](https://kombai.com/gallery/inspirations/toast-notification-web-24/) (Web) - [Drexley](https://kombai.com/gallery/inspirations/toast-notification-web-4/) (Web) - [Tarnwood](https://kombai.com/gallery/inspirations/toast-notification-ios-27/) (Mobile) ## Toast notification vs similar components | | [Toast notification](https://kombai.com/glossary/toast-notification/) | [Announcement banner](https://kombai.com/glossary/announcement-banner/) | [Dialog](https://kombai.com/glossary/dialog/) | [Error message](https://kombai.com/glossary/error-message/) | |---|---|---|---|---| | Appears | After people act | On page load | When a decision is needed | When something fails | | Stays | A few seconds | Until dismissed | Until answered | Until fixed | | Best for | Confirming and Undo | Timely news and offers | Blocking decisions | Telling people how to fix it | ## 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 - [Error message](https://kombai.com/glossary/error-message/) - [Loading indicator](https://kombai.com/glossary/loading-indicator/) - [Status indicator](https://kombai.com/glossary/status-indicator/) - [Dialog](https://kombai.com/glossary/dialog/) ## References - [WCAG 2.2: Understanding Status Messages](https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html) - [MDN: ARIA status role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/status_role) - [Material Components for Android: Snackbar](https://github.com/material-components/material-components-android/blob/master/docs/components/Snackbar.md)