Announcement Banner
A dismissible one-line announcement — the full-width inverse page-top band.
- Status
- Since
0.3.0- Accessibility pattern
- ARIA status region (opt-in)
Last updated
Install
Configure registry credentials first using the Quickstart. Before copying this item or any transitive registry dependency, verify the signed manifest and save the exact bytes for Announcement Banner before installation. Retain the digest printed by this command.
pnpm exec vegastack-design verify announcement-bannerInstall with the pinned shadcn CLI. Bare shadcn does not verify VegaStack signature or integrity.
pnpm dlx shadcn@4.21.0 add @vegastack/announcement-bannerRun the exact offline --post-write command printed by the preflight, using its saved item path and independently retained --expected-integrity digest. Use the saved preflight for every transitive registry dependency too; stop on any mismatch before using the components.
The same command installs the registry items it composes: @vegastack/button.
Usage
<AnnouncementBanner dismissable action={<a href="/changelog">Read more</a>}>
Workflows now orchestrate revenue agents.
</AnnouncementBanner>When to use
AnnouncementBanner is the one full-width inverse strip that spans the top of a page (foreground
fill, on-background text, centered copy). For an in-content notice or a plan/trial row, use
Alert — a card-ground row with an icon, a title, a description and an
action slot — rather than a second banner component.
Live announcements
A page-top band that exists at load is chrome, so it carries no live role — announcing it would
compete with the page's own heading for the first thing a screen reader user hears. Pass live
only for a banner that mounts (or re-words) after the page has settled; it then becomes a polite
role="status" region.
Examples
Dismissal
Uncontrolled by default (the banner removes itself). Pass onDismiss to own it — persist the
choice and stop rendering; the button then only notifies.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
action | React.ReactNode | — | Action slot rendered after the message (a link or small Button). |
dismissable | boolean | false | Show the dismiss button; the banner removes itself unless onDismiss is
given (controlled dismissal — persist it and stop rendering the banner). |
dismissLabel | string | 'Dismiss announcement' | Accessible name for the dismiss control. |
live | boolean | false | Mark this strip as a runtime announcement — mounted (or re-worded) after the page settled.
Only then does it become a polite role="status" live region. The default is deliberately NO
live role: a page-top band that is in the DOM at load is chrome, and announcing it competes
with the page's own heading for the first thing a screen reader user hears (D23). |
onDismiss | (() => void) | — | Called when dismissal is controlled by the host. |
Data attributes and CSS variables on AnnouncementBanner
| Attribute | Values |
|---|---|
data-live | "" |
data-slot | "announcement-banner" | "announcement-banner-action" | "announcement-banner-dismiss" |
Accessibility
- The banner carries no live role at load. With
liveit is a polite status region, so keep its message brief and avoid continuously changing content. - The dismiss control has a caller-overridable accessible name and a minimum 24px hit area.
- A composed action must keep visible link or button text; dismissal is never the only way to continue.
| Key | Action |
|---|---|
| Tab | Move to the optional action and dismiss control. |
| Enter / Space | Activate the focused button. |
| Contract | States tested |
|---|---|
| Behaviour | default, open |
| Accessibility | labeled, status-announcement, semantic-html |
| Visual | default, hover |