ui patterns
Toast notification
What is a toast notification?
A toast is a small, transient message that slides in to confirm an action - "Saved", "Archived", "Link copied" - then disappears on its own. It gives lightweight feedback without interrupting, the opposite of a modal you must dismiss.
Also known as: toast, snackbar
Prefer to watch?
Watch the recap 0:38
The demo
Click "archive" in each mode. In silent mode you're left wondering if anything happened; with a toast you get an instant, unobtrusive "done" - and a way to undo.
Try archiving in each mode and notice the difference in confidence.
What this demo shows (text version)
An "archive item" button shown two ways. In silent mode, clicking it does the action but shows no feedback at all, so you can't tell whether it worked and might click again. In toast mode, clicking it slides in a small message - "Archived" with an "Undo" link - that confirms the action and then disappears by itself after a few seconds.
The toast gives lightweight, non-blocking confirmation, which is exactly what a routine action needs. Because toasts vanish, they suit only non-critical, transient feedback - never errors that block the user or destructive confirmations, which need something that stays put.
A toast is a small, transient message that slides in to confirm an action - "Saved", "Archived", "Link copied" - then disappears on its own, giving lightweight feedback without interrupting. Use it for low-stakes confirmations (often with a quick undo), and reach for something more insistent when the message truly mustn't be missed.
In silent mode you clicked and... nothing - did it work? You're left guessing, maybe clicking again. The toast answered instantly and then got out of the way, and even offered an undo. That little "yes, it happened" is the whole reason toasts exist.
Toasts are for non-critical, transient feedback only - because they vanish, and might be missed. Confirming a save, offering a quick undo: perfect. Anything the user must see or act on - an error that blocks them, a destructive confirmation - does not belong in something that disappears after a few seconds. For that, use an inline message or a dialog.
Make them considerate: long enough to read (and pause on hover or focus), reachable by keyboard and announced to screen readers via a live region, and never stacked three-high in the corner. A toast with an "undo" is often kinder than a confirm dialog up front - let people act fast, then offer the safety net.