AnnouncementBar
Markdown for agentsDismissible announcement bar with optional action, tone and sticky positioning.
npx @slipstream-ui/cli@latest add announcement-barAnnouncement bar
The 2026 Middle Market Review is live
Read itPage content below the announcement.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| message | ReactNode | required | Message shown in the bar. |
| href | string | — | Optional destination for the action. |
| actionLabel | string | — | Action text, shown when href is provided. |
| dismissible | boolean | true | Show a close control. |
| onDismiss | () => void | — | Called after dismissal. |
| tone | 'muted' | 'brand' | 'inverse' | 'muted' | Surface treatment. |
| sticky | boolean | false | Pin the bar to the top. |
| linkComponent | React.ElementType | — | Custom link element for routers. |
Accessibility
- Renders a named region (Announcement) with a keyboard-operable dismiss button.
- The caller owns persistence and dismissal policy.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.