Toast
It quickly confirms that something happened, then disappears without interrupting the work.
What a toast says before it disappears
A toast is a short message that confirms something happened, then fades out on its own.
The real job
Confirm the outcome and get out of the way
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.
Good fit
When a quick signal is enough
- Save confirmations
- Copied-link feedback
- Completed background actions
Bad fit
When the message cannot afford to disappear
- The information is critical or long
- The user must decide before continuing
In the wild
What a toast can say in one breath
- Changes saved
- Link copied
- Export completed
See the technical example
<div role="status" aria-live="polite" aria-atomic="true">
Changes saved.
</div>Classic trap
A payment failure should not vanish
Reporting a failed payment in a toast that vanishes after three seconds is a reliable way to annoy everyone. Put a persistent message right in the payment flow instead, with a clear action to fix the problem or retry. Save the modal for the rare case where an immediate blocking decision is truly required.
Before you choose
A few checks before it disappears
- 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?
You may need…