Component Announcement Bar

The Announcement Bar component creates a versatile and customizable notification banner that can display important messages, updates, or promotional content with various styling options. It supports multiple visual variants, optional actions, and can be either dismissible or persistent.

Tip: Use this component to highlight important announcements, feature releases, promotional offers, or system-wide notifications that require immediate user attention.

Basic Example

1<AnnouncementBar message="Welcome to our new platform!" variant="gradient" />

With Action Button

1<AnnouncementBar
2  message="New features available"
3  action={{
4    content: "Learn more",
5    onClick: () => (window.location.href = "/features"),
6  }}
7  variant="accent"
8/>

Persistent Message

1<AnnouncementBar
2  message="🎉 Special holiday discount!"
3  persistent={true}
4  variant="pattern"
5/>