Skip to content

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

MessageComponentExample
About a specific fieldFieldErrorEnter an email address like ada@acme.co.
About a region, persistentAlertYour trial ends in 3 days.
Confirmation of an actiontoastSettings saved.
Result of a background tasktoast with actionExport ready — Download.
Requires a decision nowAlertDialogDelete “acme-web”?
Global, system-wideAlert in the page headerScheduled maintenance tonight at 22:00 UTC.

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.
Invoice #2041 is ready
Ada commented on “Homepage v3”
Weekly usage report