Announcement Bar

Anatomy

Import and assemble the component:

1import { AnnouncementBar } from '@raystack/apsara'
2
3<AnnouncementBar />

Renders a dismissible banner for announcements and alerts.

variant

"normal" | "error" | "gradient"

text*

string

leadingIcon

ReactNode

actionLabel

string

actionIcon

ReactNode

className

string

Every rendered part carries a stable data-slot attribute for styling and testing:

Slot	Element
`announcement-bar`	The root `<div>` element
`announcement-bar-icon`	Wrapper around the leading icon (when `leadingIcon` is set)
`announcement-bar-text`	The main text
`announcement-bar-action`	The action `<button>` (when `actionLabel` or `actionIcon` is set)
`announcement-bar-action-label`	The action button's text label
`announcement-bar-action-icon`	Wrapper around the action icon (when `actionIcon` is set)

The action (when actionLabel or actionIcon is provided) is rendered as a real <button>, so it's focusable, reachable by Tab, and activated by Enter/Space — not as a <Text> with an onClick handler.
The action button exposes a focus ring via :focus-visible.
Decorative leadingIcon and actionIcon are marked aria-hidden="true" so they don't add noise to screen readers.