Key insights
- A notification isn't one component — it's a system of four surfaces: toast, banner, modal, and badge. The same content can be delivered at four different volumes.
- The trigger picks the volume. Let the event's severity decide the surface: a low-priority "new message" fits a toast, a degraded-service warning a banner, a blocking "card declined" error a modal, and a passive unread count a badge.
- Persistence is part of the contract. Toasts auto-dismiss in a few seconds (and should offer undo), banners stay until manually cleared, modals block until the user acts, and badges sit quietly until the count is resolved.
- Stack behavior separates good from broken. Several toasts can stack and breathe; several modals become a trainwreck — blocking dialogs must never queue on top of each other.
- Over-escalating backfires: route everything to the loudest surface and you get zero attention, because users learn to tune the noise out.
Do / Don't
- Do: Map each notification's severity to the surface that matches it — toast, banner, modal, or badge.
- Do: Let toasts auto-dismiss with an undo affordance, and reserve modals for actions that genuinely must block.
- Do: Stack low-priority notifications so they breathe instead of piling up on screen.
- Don't: Route every alert to the most intrusive surface — over-escalation trains users to ignore all of them.
- Don't: Queue multiple modals on top of each other; blocking dialogs stacked together are a trainwreck.
- Don't: Use a blocking modal for a low-severity, purely informational message.
