Toast
A short, self-dismissing message that appears at the edge of the screen to confirm an action or report a status.
Toasts appear after an action, stay visible for a few seconds, and disappear on their own. They do not block the rest of the UI. Material Design calls them snackbars and places them at the bottom; iOS and most web apps place them at the top or bottom corner. Stack multiple toasts vertically if more than one arrives. For persistent messages, use a banner instead.
Also called
snackbartransient notificationflash message
When to use
- Confirming non-critical actions like 'Copied' or 'Saved'
- Reporting background events like 'Connection restored'
- Brief status updates that should not interrupt the user
When not to use
- Errors the user must read or act on (use a banner or dialog)
- Long messages that can't be read in a few seconds
- Information that the user needs to refer back to
Related
Source
Material Design ('Snackbars'); web vernacular 'toast' originated from Android's Toast XML class. Popular libraries: Sonner, react-hot-toast, Radix Toast.