Comparison file · feedback
Toast vs Alert vs Notification vs Banner
Choose a message channel based on urgency, persistence, scope, and required action.
Run the diagnosisFast 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 ↗Alert
An ARIA alert is a semantic behavior, not every red box or every notification container.
Open field note ↗Notification
Notification is a channel and lifecycle concept, not a single visual shape.
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
| Decision | Toast | Alert | Notification | Banner |
|---|---|---|---|---|
| Persistence | Usually temporary and not the only record of important information. | Long enough to perceive; often remains until the condition changes. | May remain until read, dismissed, archived, or resolved. | Persists while the page-level condition matters. |
| Focus | Does not steal focus; any action must remain keyboard reachable. | Does not move focus. | Does not steal focus when delivered; actions are available when users open it. | Does not steal focus; actions enter normal focus order. |
| Required action | At most a small optional action; never a required workflow. | Primarily a message; required response belongs in an alert dialog or normal task flow. | May include durable actions or navigation to details. | May contain one or two clear actions related to the message. |
| Scope | Recent event or local condition. | Recent event or local condition. | User or system event channel. | Page or site condition. |
| Placement | Consistent viewport region, often a stack near an edge. | Near the relevant content or in an announced status region. | Inline, in a notification center, or in a managed message region. | Prominent horizontal region near the top of the relevant scope. |
Discriminating 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
Implementation consequences
Turn the comparison into a build decision
The final choice must explain both the selected contract and the alternatives it excludes.
Name the task
Choose a message channel based on urgency, persistence, scope, and required action. Write the user goal before choosing any component from a library.
Freeze the decisive dimensions
For this group, compare Persistence, Focus, Required action, Scope, Placement. Do not allow visual similarity to replace those requirements.
State the exclusion
Record why the closest rejected pattern fails. That reason helps a coding agent avoid silently substituting a familiar but incompatible component.
Verify the behavior
Open the selected pattern reference, copy its acceptance checks, and test focus, keyboard, dismissal, placement, content, and mobile behavior in the real interface.
Frequently asked questions
Toast vs Alert vs Notification vs Banner questions
Direct answers based on the reviewed behavior contract above.
What is the main difference between Toast, Alert, Notification, Banner?
Choose a message channel based on urgency, persistence, scope, and required action. The decisive dimensions on this page are Persistence, Focus, Required action, Scope, Placement. Read each column as a behavior contract, not as a visual style recommendation.
How do I choose among Toast, Alert, Notification, Banner?
Begin with the required user task, then answer the discriminating questions above. Choose the pattern whose purpose and behavior match the evidence, and explicitly reject alternatives whose focus, input, modality, persistence, or structural contract would break the task.
Can two of these terms apply to the same interface?
Sometimes. This taxonomy includes semantic patterns, composite patterns, presentation forms, behavior variants, message channels, and generic behavior labels. A presentation term and a semantic contract can coexist, so specify each required property instead of forcing every term into a flat either-or choice.
How should I verify the final implementation?
Open the selected pattern reference and run its observable checks. At minimum, confirm the configured trigger, dismissal, focus, keyboard behavior, interactive content, placement, and mobile adaptation. Also verify the linked official or first-party source against the library you ship.