Overlay
Toast
Toast is a short message that appears in a screen corner for a few seconds and then disappears on its own — lightweight feedback that never blocks the flow.
Definition
A toast is a short message that appears in a corner of the screen, lingers for a few seconds, and then quietly slips away on its own. The name comes from the way bread pops up out of a toaster, and that image fits: a one-line update like "Saved" or "Link copied" slides in near the top or bottom edge and then withdraws without a fuss. The user never has to press an OK button to dismiss it or pause what they're doing. They just catch a glimpse out of the corner of their eye, confirm that the action went through, and keep working. That is why the toast has become the lightest way to give feedback: it tells you something happened without ever getting in the way.
Why does it matter?
Toasts matter because they reassure users without interrupting them. When you press a button and nothing seems to happen, you start to wonder whether it registered, and you often press it again just to be sure. A quick toast line settles that doubt in an instant: it tells you the action landed. At the same time, a toast dismisses itself and never blocks the background, so unlike a modal that demands a response, it doesn't break the user's flow even slightly. But that same lightness is also its limit. Because a toast appears and vanishes in seconds, it is easy to miss, and once it's gone there is no way to bring it back. So if you put information a user genuinely needs to read and act on into a toast, anyone who misses it may never learn what happened. That's why it's important to hold the line: a toast is only right for news that's light enough to lose.
Common mistakes
- Using a toast to report a serious error the user really must see. Since it appears and disappears in a moment, the message is easy to miss, and once it's gone there is no way to revisit what went wrong, so the problem just gets buried.
- Showing toasts for too short a time or stacking several at once. If a message vanishes before it can be read, or notifications paper over the whole screen, the news that actually mattered drowns in the noise and nothing gets through.
- Treating a toast like a button the user is required to press. A toast is a passing notification, so any action tucked inside it should be light enough that missing it never leaves the user stuck.
Practical tips
- A toast is lightweight feedback that doesn't block the flow, so use it for news you only need to announce, like a successful save. When something truly requires the user's confirmation, or an error they can't afford to miss, a modal or an inline message that clearly holds their attention is the safer choice.
- If the action they just took can be reversed, add a short action like "Undo" to the toast. A single undo button that appears right after a delete dramatically reduces the damage from an honest mistake.
- Give the toast enough time on screen for a person to read one line comfortably, and when several notifications overlap, stack them one at a time and show them in order. It also helps to leave a way to dismiss it by hand for users in a hurry.
Ask your AI
Build me a toast component for success messages like [message — e.g. "Saved" / "Link copied"]. Have it slide in at the top or bottom corner and disappear on its own after about 4 seconds — long enough to read one line comfortably — and never dim the background or force an OK button, so it doesn't block the flow at all. Add a manual close (X) for users in a hurry, and give it role="status" with aria-live="polite" so screen readers announce it without interrupting. Use a gentle fade/slide for enter and exit, but when prefers-reduced-motion is set, drop the animation and show it instantly.
Find every message currently shown as a toast in the code I'll paste below, and sort each one by severity: is it news you only need to announce, or information the user can't afford to miss or must confirm? A toast auto-dismisses in seconds and can't be recalled once it's gone, so pull anything like payment failures, data-loss warnings, or errors that need confirmation out of toasts and move them to a modal or a persistent inline message — and keep only lightweight news like a successful save or a copied link as a toast. Give me a [message → current pattern → recommended pattern → why] table, and include the rewritten code for everything that needs to move.
Design an "Undo" toast that appears right after [a reversible action — e.g. deleting an item / archiving]. Don't commit the action immediately; hold it for a few seconds and only then finalize, and if the user hits Undo within that window, restore everything. Since this is a passing notification, missing the Undo should never leave the user stuck — so don't make it a required button they have to press; keep it light. Because it carries an action, give it a longer 5–8 seconds on screen, add a manual dismiss, and when several overlap show only one at a time, in order.