Feedback
Choosing between inline messages, alerts, toasts and dialogs — so people notice what matters and aren't interrupted by what doesn't.
Every message competes for attention. The right component depends on how urgent the message is and whether it relates to something on screen.
Choosing a component
Principles
- Closest to the cause. Show feedback where people are looking: errors next to fields, results next to the button that caused them.
- Interrupt only for decisions. Dialogs stop everything; reserve them for choices that can't wait. Everything else is inline or a toast.
- Transient means non-essential. Toasts disappear. Never put information in a toast that people can't find elsewhere, and never put the only way to recover from an error in one.
- Status needs more than color. Every status message carries an icon and words.
Toasts
- One line if possible; two at most. Lead with the outcome: Invoice sent, not Success!
- Offer one action — usually Undo or View.
- Errors in toasts stay until dismissed; confirmations dismiss themselves after 5 seconds, and pause while hovered or focused.
- Toasts are announced politely by screen readers; they never steal focus.
examples/patterns/undo-toast.tsx