Announcement Bar
ProA dismissible strip pinned to the top of the page for time-sensitive announcements, product updates, or promotional messages. Supports a link or CTA button alongside the message. Persists across page navigation until dismissed.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | ||
| With CTA |
Usage Guidelines
Do
Keep the message to a single short sentence.
Don't
Stack multiple announcement bars — one at a time is the maximum.
Do
Include a dismiss button with clear keyboard access.
Don't
Block page content behind the bar — it should push content down, not overlay.
Do
Persist dismissal state in localStorage so it does not reappear after refresh.
Don't
Remove the dismiss button — users must be able to close it.
Do
Use role="status" for informational messages or role="alert" for urgent ones.
Don't
Code
Design Tokens
Accessibility
- Uses role="status" for non-urgent announcements or role="alert" for critical messages.
- Dismiss button has aria-label="Dismiss announcement".
- Bar does not trap focus — keyboard users can tab past it naturally.
- Content is not obscured — the bar pushes page content down rather than overlaying.