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.
The Design System Blueprint
An 11-page visual guide to consistent, scalable UI: colors, typography, spacing, components, motion.
