Skip to main content
Mythos

Toast notifications are brief, non-blocking on-screen messages that surface system feedback — success, error, or status — for a few seconds before dismissing themselves automatically.

The pattern takes its name from the Windows XP "toast" balloon that popped up from the taskbar like bread from a toaster. Toasts occupy a fixed screen region — typically a corner or the bottom edge — and stack vertically when multiple fire at once. They are deliberately transient: most disappear after two to seven seconds, though critical messages can persist until acknowledged or include an action button such as an undo or retry.

Toasts are non-modal, meaning they never block the user's interaction with the page beneath. That distinguishes them from alert dialogs or banners, which interrupt the flow. Common categories are confirmation (a save succeeded), error (a network call failed), warning (a session is expiring), and informational (a background sync finished). Material Design calls the same primitive a "snackbar" — usage and constraints overlap heavily.

Most modern web frameworks ship a toast library — react-hot-toast, Sonner, and Chakra UI's useToast hook dominate React; Vue and Svelte have their own equivalents. Mobile SDKs treat them as native primitives. The pattern carries a known trade-off: toasts can disappear before a user with cognitive or motor disabilities can read or react, which is why accessibility guidance increasingly recommends persistent banners for errors and reserving toasts for low-stakes confirmations.

Contexts

Created with 💜 by One Inc | Copyright 2026