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.