Behavior comparison
Banner vs Toast
Decisive difference
Banner stays visible for a page-wide condition until it is resolved or dismissed; Toast briefly reports an event and can vanish on its own.
Choice criteria, links and sources
- BannerChoose Banner if the condition persists and the user must keep it in mind while using the page.Open entry Banner
- ToastChoose Toast if you confirm a low-risk background result that needs no action.Open entry Toast
See the nine dimensionsSee the sources
Inform the user
Try it
Is the message transient, persistent in context, or global to the page?
Banner
Shared trial context
A workspace reports a state change and must place the message according to its scope, urgency, and persistence.
Banner
Mission
Banner
Read the announcement, open service details, then navigate to another project and verify the condition remains visible.
Maintenance is planned Sunday from 08:00 to 09:00. Local drafts will remain available.
View detailsProject Alpha
Your workspace remains available.
Project Beta
Your workspace remains available.
Maintenance details
Read access remains available during maintenance.
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- The wide named section appears before main content with the maintenance time and one details link.
- Edge case
- At narrow widths the message wraps without covering navigation, and the details link remains comfortably operable by touch.
Toast
Mission
Toast
Copy the link, hear or read the confirmation, focus Dismiss, and verify the timer pauses.
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- The message Link copied appears without moving focus away from the copy button.
- Edge case
- Queued messages remain individually readable, and an available action is never covered by another toast.
What this example shows
Banner covers a broad page condition; Inline alert belongs beside one task, while Toast is a transient event update.
Which fits your need?
Banner
Announcing scheduled maintenance affecting the page
Toast
Confirming a low-risk background result
Difference and sources
Banner covers a broad page condition; Inline alert belongs beside one task, while Toast is a transient event update.
Read the sourcesParts of the specimen
Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.
Surface
The visible container that holds the concept's content.
Decision
Family question
Is the message transient, persistent in context, or global to the page?
Three criteria to choose
- Use case
Banner
Announcing scheduled maintenance affecting the page
Toast
Confirming a low-risk background result
- Placement
Banner
Spans the top of the page or application content in document flow.
Toast
Overlays a viewport edge without moving the page layout.
- Dismissal
Banner
A close control exists only for noncritical notices, and dismissal persistence expires when the message changes materially.
Toast
It expires after sufficient time, pauses for interaction, and can be dismissed explicitly without requiring action.
Nine dimensions
- Trigger
Banner
A page-wide or product-wide condition makes the announcement relevant.
Toast
A system event or completed user action creates the message; users do not open it as a destination.
- Modality
Banner
Non-modal, persistent region; the rest of the page remains operable.
Toast
Non-modal, transient status message that does not take focus.
- Placement
Banner
Spans the top of the page or application content in document flow.
Toast
Overlays a viewport edge without moving the page layout.
- Interactivity
Banner
May contain one high-level action or dismissal without becoming a task surface.
Toast
May offer one limited undo or dismiss action; never holds an essential decision.
- Focus
Banner
The banner appears before main content without stealing focus; links receive the same visible focus as the rest of the page.
Toast
The toast never steals focus on arrival; an optional action becomes reachable without disrupting the current task.
- Dismissal
Banner
A close control exists only for noncritical notices, and dismissal persistence expires when the message changes materially.
Toast
It expires after sufficient time, pauses for interaction, and can be dismissed explicitly without requiring action.
- Accessible role
Banner
section | aside
Toast
status
- Use case
Banner
Announcing scheduled maintenance affecting the page
Toast
Confirming a low-risk background result
- Mobile behavior
Banner
Allow text and actions to wrap without covering navigation or the first content heading.
Toast
Stay clear of system chrome, safe areas, and the keyboard; keep copy and actions brief.
| Dimension | BannerBanner | ToastToast |
|---|---|---|
| Trigger | A page-wide or product-wide condition makes the announcement relevant. | A system event or completed user action creates the message; users do not open it as a destination. |
| Modality | Non-modal, persistent region; the rest of the page remains operable. | Non-modal, transient status message that does not take focus. |
| Placement | Spans the top of the page or application content in document flow. | Overlays a viewport edge without moving the page layout. |
| Interactivity | May contain one high-level action or dismissal without becoming a task surface. | May offer one limited undo or dismiss action; never holds an essential decision. |
| Focus | The banner appears before main content without stealing focus; links receive the same visible focus as the rest of the page. | The toast never steals focus on arrival; an optional action becomes reachable without disrupting the current task. |
| Dismissal | A close control exists only for noncritical notices, and dismissal persistence expires when the message changes materially. | It expires after sufficient time, pauses for interaction, and can be dismissed explicitly without requiring action. |
| Accessible role | section | aside | status |
| Use case | Announcing scheduled maintenance affecting the page | Confirming a low-risk background result |
| Mobile behavior | Allow text and actions to wrap without covering navigation or the first content heading. | Stay clear of system chrome, safe areas, and the keyboard; keep copy and actions brief. |