component · messaging
Toast
also called snackbar (material)
A brief, self-dismissing message that appears at a screen edge to confirm an action or report status without interrupting the user's flow.
The defining property of a toast is that it leaves on its own. It exists to acknowledge (saved, sent, copied) and then get out of the way. The moment a message needs a decision, a dismissal, or more than a glance, it has outgrown the pattern.
The name “snackbar” comes from Material Design, where the component may also carry a single optional action (like undo). In practice the two words are used interchangeably; “toast” is the older and more widespread term, from the way the message pops up like bread from a toaster.
Because toasts vanish unprompted, they are a poor home for errors or anything a
screen-reader user must not miss. Announce them politely (role="status"), keep
them short, and never stack more than a few.
Which word?
| If you want | say |
|---|---|
| a passing confirmation that cleans up after itself | toast |
| a message strip that stays until it is dealt with | banner |
| a dialog that announces itself and blocks until answered | alert dialog |
| a boxed note sitting inside the content | callout |
| the bar telling you the app is working offline | offline indicator |
| reporting an outcome the reader did not navigate to | status message |
Related
See also: Optimistic UI · Undo
Implementations
Specimens illustrate the concept; for production use, start here.
| material | Snackbar |
| base-ui | Toast |
| shadcn | Sonner |
| carbon | Toast notification |