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 />

Usage

Set how loud the bar looks, and what sits beside the message.

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"

Icon and action

leadingIcon marks the kind of notice, and actionLabel turns the bar into a link. Give the action a verb that says where it goes, since the bar is easy to ignore, so the label carries the click.

1<AnnouncementBar
2  leadingIcon={<Info />}
3  text="Scheduled maintenance on Sunday, 02:00–04:00 UTC."
4  actionLabel="Read the notice"
5  actionIcon={<ExternalLink size={12} />}
6/>

Dismissible

Set dismissible to add a close button at the end of the bar. Without onDismiss, the bar hides itself. With onDismiss, the bar stays mounted and you remove it, for example after you save the dismissal so the bar stays hidden on the next visit.

1<AnnouncementBar
2  text="Apsara v1 is now available"
3  dismissible
4  onDismiss={() => alert("Dismissed")}
5/>

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)
announcement-bar-dismissThe dismiss <button> (when dismissible is set)

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.
  • The dismiss button has aria-label="Dismiss announcement" and the same focus ring.
  • Decorative leadingIcon and actionIcon are marked aria-hidden="true" so they don't add noise to screen readers.