Behavior comparison
Banner vs Inline alert
Decisive difference
Banner announces a page-wide condition at the top of the page; Inline alert sits beside the one task or field it concerns.
Choice criteria, links and sources
- BannerChoose Banner if the message concerns the whole page or session, such as scheduled maintenance.Open entry Banner
- Inline alertChoose Inline alert if the message explains a problem in one form, field, or upload, right where it happened.Open entry Inline alert
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.
Inline alert
Mission
Inline alert
Trigger the failure, read the reason, use the recovery action, and verify the message stays until a valid file is chosen.
Maximum size: 1 MB.
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 visible alert names the failed file, explains the size limit, and offers Choose another file.
- Edge case
- If the error is already in the focused upload region, it is not redundantly announced as an assertive alert.
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
Inline alert
Explaining a form or upload failure in context
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
Inline alert
Explaining a form or upload failure in context
- Placement
Banner
Spans the top of the page or application content in document flow.
Inline alert
Inside the related form or content section, close to the source of the issue.
- Dismissal
Banner
A close control exists only for noncritical notices, and dismissal persistence expires when the message changes materially.
Inline alert
It remains until the condition resolves; a close control exists only when hiding the message cannot conceal an unresolved risk.
Nine dimensions
- Trigger
Banner
A page-wide or product-wide condition makes the announcement relevant.
Inline alert
A validation or system condition relevant to a specific section creates the message.
- Modality
Banner
Non-modal, persistent region; the rest of the page remains operable.
Inline alert
Non-modal, persistent message within the affected context.
- Placement
Banner
Spans the top of the page or application content in document flow.
Inline alert
Inside the related form or content section, close to the source of the issue.
- Interactivity
Banner
May contain one high-level action or dismissal without becoming a task surface.
Inline alert
May include recovery links or actions and remains available until resolved or explicitly dismissed.
- Focus
Banner
The banner appears before main content without stealing focus; links receive the same visible focus as the rest of the page.
Inline alert
The message does not steal focus on routine updates; failed submission may focus a summary or first invalid control deliberately.
- Dismissal
Banner
A close control exists only for noncritical notices, and dismissal persistence expires when the message changes materially.
Inline alert
It remains until the condition resolves; a close control exists only when hiding the message cannot conceal an unresolved risk.
- Accessible role
Banner
section | aside
Inline alert
status | alert | none
- Use case
Banner
Announcing scheduled maintenance affecting the page
Inline alert
Explaining a form or upload failure in context
- Mobile behavior
Banner
Allow text and actions to wrap without covering navigation or the first content heading.
Inline alert
Use the container width near the affected content instead of floating over it.
| Dimension | BannerBanner | Inline alertInline alert |
|---|---|---|
| Trigger | A page-wide or product-wide condition makes the announcement relevant. | A validation or system condition relevant to a specific section creates the message. |
| Modality | Non-modal, persistent region; the rest of the page remains operable. | Non-modal, persistent message within the affected context. |
| Placement | Spans the top of the page or application content in document flow. | Inside the related form or content section, close to the source of the issue. |
| Interactivity | May contain one high-level action or dismissal without becoming a task surface. | May include recovery links or actions and remains available until resolved or explicitly dismissed. |
| Focus | The banner appears before main content without stealing focus; links receive the same visible focus as the rest of the page. | The message does not steal focus on routine updates; failed submission may focus a summary or first invalid control deliberately. |
| Dismissal | A close control exists only for noncritical notices, and dismissal persistence expires when the message changes materially. | It remains until the condition resolves; a close control exists only when hiding the message cannot conceal an unresolved risk. |
| Accessible role | section | aside | status | alert | none |
| Use case | Announcing scheduled maintenance affecting the page | Explaining a form or upload failure in context |
| Mobile behavior | Allow text and actions to wrap without covering navigation or the first content heading. | Use the container width near the affected content instead of floating over it. |