Notifications & Toasts

People stopped reading it months ago, which is a reasonable response to a box that has never once said anything urgent. Then last week it said a payment had not gone through, in the same grey box, for four seconds, and somebody found out a fortnight later from their supplier.

Nothing was broken. The message was written, shown and dismissed exactly as designed, and the design had spent the same quiet channel on forty routine confirmations before it needed one to land.

Feedback runs on a ladder from barely there to stop everything. Most products build one rung and put every message on it.

Types of Notification

A team ships a confirmation dialog for saving a document. Somebody has to click OK every time they press Save.

Two weeks later they add a toast for permanently deleting a folder, because the dialogs were getting complaints. Now the loudest tool in the product guards the safest action, and the quietest one guards the action that destroys work.

The four forms are a ladder, and the rule is to use the quietest one that still lands.

Toast, for Routine Confirmation

A small message that appears near an edge and fades on its own.

This is the workhorse: "Saved", "Message sent", "Copied". It confirms without interrupting, so somebody sees it and keeps working. Because it leaves on its own, nothing critical belongs in one. If a person has to see it or act on it, a message that vanishes in four seconds is the wrong home.

Inline Banner, for a State That Persists

A message that stays until it is resolved or dismissed, sitting near what it refers to.

Use it for an ongoing situation that needs attention rather than immediate action: "Your trial ends in 3 days", "Some fields need fixing", "You are offline". It stays put, which is what makes it right when the information has to still be there in a minute. Placed beside the thing it describes, it does far more work than the same words floating in a corner.

Badge, for Something That Can Wait

A dot or a number on an icon, saying there is something here without saying what.

It suits anything checkable later: unread messages, pending approvals. This is the least intrusive signal available, which is exactly why it fits things that can sit for an hour.

Blocking Dialog, for a Decision That Cannot Wait

A modal that stops everything until somebody answers.

Reserve it for the rare message that is critical, or needs a decision before anything else happens: "This will permanently delete 40 items", "Discard unsaved changes?". It is the most expensive tool you have, so it should be the rarest. Modals, Dialogs & Sheets covers how to build one.

Matching the Rung to the Stakes

• Routine success: a toast.
• Ongoing status that needs attention: an inline banner.
• Can wait, checkable later: a badge.
• Critical, or needs a decision now: a blocking dialog, rarely.

The question that settles most arguments is what happens if somebody misses this. If the honest answer is nothing much, it is a toast or a badge. Only genuine harm earns a banner that persists or a dialog that blocks.

Pro tip: Count the blocking dialogs in your product and ask what each one is protecting. Teams usually find two or three guarding routine saves, inherited from a version of the product where the save was unreliable, and nobody has revisited them since.