Toast
Brief, non-blocking system feedback that confirms an outcome while work continues.
Definition
Definition
A toast is a short, temporary message that confirms something happened, then disappears on its own.
Problem it solves
Problem it solves
A toast closes the loop on an action the user already took, without asking anything of them. It causes no interruption and expects no response — it's there to be noticed, not acted on.
When to use it
When to use it
- Save confirmations
- Copied-link feedback
- Completed background actions
When not to use it
When not to use it
- The information is critical or long
- The user must decide before continuing
Example
Example
- Changes saved
- Link copied
- Export completed
See the technical example
<div role="status" aria-live="polite" aria-atomic="true">
Changes saved.
</div>Counter-example
Counter-example
Reporting a failed payment as a toast that vanishes after three seconds is a common mistake. A persistent message placed right in the payment context is the better fit — it stays visible with a clear action to fix the problem or retry, rather than reaching for a modal unless an immediate blocking decision is genuinely required.
Questions to ask yourself
Questions to ask yourself
- Has the action the user cares about already finished?
- Is there truly nothing left for the user to decide?
- Would missing this message leave the user stuck or confused?
- Is the information short enough to read in a couple of seconds?
Related patterns