Announcement Bar

A banner that displays a short site-wide message with an optional action, such as a product update, promotion, or warning.

Anatomy

Import and assemble the component:

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

3<AnnouncementBar />

API Reference

Renders a dismissible banner for announcements and alerts.

Prop

Type

Slots

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

SlotElement
announcement-barThe root <div> element
announcement-bar-iconWrapper around the leading icon (when leadingIcon is set)
announcement-bar-textThe main text
announcement-bar-actionThe action <button> (when actionLabel or actionIcon is set)
announcement-bar-action-labelThe action button's text label
announcement-bar-action-iconWrapper around the action icon (when actionIcon is set)

Examples

Variant

Variants convey the tone of the announcement. Default is normal; use error for urgent notices and gradient for promotional messages.

1<Flex direction="column" gap={5} style={{ width: "100%" }}>
2  <AnnouncementBar
3    variant="normal"
4    text="We have introduced a new feature"
5    actionLabel="Read More"
6  />
7  <AnnouncementBar
8    variant="error"
9    text="Your trial has expired"
10    actionLabel="Upgrade"
11  />
12  <AnnouncementBar
13    variant="gradient"
14    text="Apsara v1 is now available"
15    actionLabel="See what's new"

Accessibility

  • 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.