Two-pattern comparison · Feedback and notices
Toast vs Banner
Choose a message channel based on urgency, persistence, scope, and required action.
Diagnose this choiceFast decision
Start with the behavior that changes the build
Toast
If information must persist or be revisited, use Notification or Banner instead.
Open field note ↗Banner
Do not confuse a visual banner message with the ARIA banner landmark for site-level header content.
Open field note ↗Behavior matrix
Compare contracts, not silhouettes
The correct name for a floating surface depends on trigger, focus, keyboard support, dismissal, and content type — not the pixel size alone.
| Decision | Toast | Banner |
|---|---|---|
| Persistence | Usually temporary and not the only record of important information. | Persists while the page-level condition matters. |
| Focus | Does not steal focus; any action must remain keyboard reachable. | Does not steal focus; actions enter normal focus order. |
| Required action | At most a small optional action; never a required workflow. | May contain one or two clear actions related to the message. |
| Scope | Recent event or local condition. | Page or site condition. |
| Placement | Consistent viewport region, often a stack near an edge. | Prominent horizontal region near the top of the relevant scope. |
When to use each
Choose by the task, not the look
Use a Toast
Confirm a recent event without interrupting the current task. The decisive boundary is: If information must persist or be revisited, use Notification or Banner instead.
Full Toast referenceUse a Banner
Keep a broad condition or announcement visible across the relevant page scope. The decisive boundary is: Do not confuse a visual banner message with the ARIA banner landmark for site-level header content.
Full Banner referenceDiscriminating questions
Ask only what changes the result
- May the message disappear automatically without losing required information?Yes / No
- Does the message apply to the whole page rather than one recent action?Yes / No
- Should users be able to revisit or manage the message later?Yes / No
Frequently asked questions
Toast vs Banner: common questions
Direct answers based on the reviewed behavior contract above.
What is the main difference between a Toast and a Banner?
If information must persist or be revisited, use Notification or Banner instead. By contrast, A prominent page-level message region that persists while a condition, announcement, or required awareness remains relevant. The decisive dimensions include persistence, focus, required action, and scope, placement.
When should I use a Toast instead of a Banner?
Confirm a recent event without interrupting the current task. The key check is: If information must persist or be revisited, use Notification or Banner instead, then avoid alert for semantically urgent live messages and banner for persistent page-level conditions..
Can a Toast and Banner look the same?
Yes. Visual appearance does not reliably distinguish these patterns. Confirm the trigger, content type, modality, focus behavior, and dismissal rules before choosing. A Banner used where a Toast is required can break the interface for keyboard users.