Toast
A small self-dismissing message that floats over the interface to confirm something happened, then leaves on its own.
See it
What it is
A toast is a short status message that appears over the interface, usually in a corner, and removes itself after a few seconds. It is for confirmations and low-stakes news: 'Saved', 'Copied to clipboard', 'Message sent'. The name comes from the way it pops up like bread out of a toaster.
Reach for a toast when someone should know a thing happened but should not have to act on it. If the message needs a decision, use a modal. If it needs an undo or a retry, this glossary files that under the sibling pattern, the snackbar, which carries one action button. Treat that as a chosen split rather than a law: Material coined snackbar for the message-plus-action strip, most web libraries happily ship toasts with an Undo button and still call them toasts, and the two words overlap heavily in practice. Settle on which one your team means before anyone argues about it in review. Sonner is the reference implementation on the web and set the current expectations: stacked cards, swipe to dismiss, timer pauses on hover.
Gotcha: a toast holding the only copy of important information is a bug. Anyone who looked away misses it, and screen readers only announce it if the container is a live region. Errors that need fixing belong inline, and 'Are you sure?' never belongs in a toast.
Ask AI for it
Build a toast notification system: toasts stack in the bottom-right corner, each a rounded card with a leading icon, one line of text, and an optional action button. Animate in with a slide up plus fade over 200ms, auto-dismiss after 4 seconds, pause the timer on hover, and allow swipe or click to dismiss early. Cap the stack at three visible with the rest collapsed behind, support success, error, and info variants, render into a portal at the document root, and mark the container as an aria-live polite region.