Banner

Banner

Component preview

A prominent, persistent message spanning a page region to communicate a condition that affects broad page use.

Build pack

Turn this concept into a useful prompt

Choose the task and destination. Technical names stay in English.

What do you want to do?

CreateModifyRepair

Where will you use the prompt?Prompt languageLanguage of the interface to build

Your objective

In your own words

What people describe

Documented aliases: announcement bar, site notice, page notice

a message across the top of the page
warn everyone about scheduled maintenance
a full-width announcement above the content
show that the whole service is degraded
a persistent notice for all users
put a site-wide update in a top bar

Try it

Inform the user

Compare all three behaviors

Shared comparison scenario: A workspace reports a state change and must place the message according to its scope, urgency, and persistence.

This context stays fixed. Switch concepts to observe the mission, edge case, and specimen specific to each behavior.

Your task

Read the announcement, open service details, then navigate to another project and verify the condition remains visible.

Edge case to verify

At 320 px the message wraps without covering navigation, and the details link remains a 44 px touch target.

Mission

Read the announcement, open service details, then navigate to another project and verify the condition remains visible.

Primary state: The wide named section appears before main content with the maintenance time and one details link.

Maintenance is planned Sunday from 08:00 to 09:00. Local drafts will remain available.

View details

Project Alpha

Your workspace remains available.

Maintenance details

Read access remains available during maintenance.

Parts of the specimen

Select a marker directly on the specimen, or use the list below, to see its role. Hide the markers to operate the lab without obstruction.

Use it when

Announcing scheduled maintenance affecting the page
Communicating a service-wide degraded state

Avoid it when

Only one field or local task is affected
The message is a routine low-risk confirmation

Compare similar concepts

Toast is transient and detached from the source; Inline alert stays beside the relevant content, while Banner communicates a broad page-level message.

Toast

Inline alert stays beside the affected content; Toast is transient and detached, while Banner addresses a broad page-level condition.

Inline alert

Technical details

Behaviors

Remain until resolved
The message remains in context until the condition changes or the user deliberately dismisses it.
Announce meaningful changes
A live region announces new status only when the update is important and not already focused.

States

Maintenance announcement inactive
Maintenance announcement inactive
Maintenance announcement active
Maintenance announcement active

State transitions

Maintenance announcement inactive → Maintenance announcement active
A scheduled workspace-wide maintenance window is published with its time and details link.
Maintenance announcement active → Maintenance announcement inactive
The announced maintenance window ends or is withdrawn by its authoritative source.

Test scenarios

Context: A workspace announces a two-hour read-only maintenance window affecting every project.
Mission: Read the announcement, open service details, then navigate to another project and verify the condition remains visible.
Primary state: The wide named section appears before main content with the maintenance time and one details link.
Edge case: At 320 px the message wraps without covering navigation, and the details link remains a 44 px touch target.

Accessibility

Role: named section or aside, not the site header banner role
Accessible name: The primary control or named region has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
Focus: The banner appears before main content without stealing focus; links receive the same visible focus as the rest of the page.
Dismissal: A close control exists only for noncritical notices, and dismissal persistence expires when the message changes materially.
Scroll: Showing or updating the message preserves the reader's scroll position unless focus is intentionally moved to a blocking error.
Announcement: A newly introduced urgent condition may be announced once, while persistent static content remains discoverable without repeated live announcements.
Keyboard: Tab reaches banner links in document order
Enter activates the details or dismiss action

Bindings

section or aside with an accessible name
implementationKind
custom
nativeElement
section or aside with an accessible name
ariaPattern
named region
radixPrimitive
Not applicable
shadcnRecipe
Not applicable
runtimeDependency
Not applicable
packageName
Not applicable
exportName
Not applicable
exactVersion
Not applicable
status
exception
verifiedAt
2026-07-16
deprecationStatus
active
replacement
Not applicable
validFrom
Not applicable
validUntil
Not applicable
Equivalence caveat: ARIA role banner denotes the site header, so a product announcement banner normally uses a named section or aside instead.
Verify binding source

Sources

WAI-ARIA 1.2: Roles Model
W3C WAI · standard · 2026-07-16
Claim covered: Banner: normative ARIA role definitions and constraints used to qualify the stated accessible role.
WCAG 2.2: Status Messages
W3C WAI · standard · 2026-07-16
Claim covered: Banner: WCAG status-message requirements used to qualify non-focus-moving announcements.

Verified on 2026-07-16 · rev. 1

Owner: SkillCodex Editorial
Status: review
Review: Independent editorial review pending
Next review: 2026-10-16
Publication: Not published
Change history: Initial sourced MVP draft; independent language review pending.

Banner

Turn this concept into a useful prompt

What people describe

Inform the user

Banner

Project Alpha

Project Beta

Maintenance details

Parts of the specimen

Use it when

Avoid it when

Compare similar concepts

Behaviors

States

State transitions

Test scenarios

Accessibility

Bindings

Sources

Banner

Turn this concept into a useful prompt

What people describe

Inform the user

Banner

Project Alpha

Project Beta

Maintenance details

Parts of the specimen

Use it when

Avoid it when

Compare similar concepts

Behaviors

States

State transitions

Test scenarios

Accessibility

Bindings

Sources