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.

BannerChoose Banner if the message concerns the whole page or session, such as scheduled maintenance.
Inline alertChoose Inline alert if the message explains a problem in one form, field, or upload, right where it happened.

See the nine dimensions See the sources

Decision

Family question

Is the message transient, persistent in context, or global to the page?

Nine dimensions

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.

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.

BannerChoose Banner if the message concerns the whole page or session, such as scheduled maintenance.
Inline alertChoose Inline alert if the message explains a problem in one form, field, or upload, right where it happened.

See the nine dimensions See the sources

Nine dimensions

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.