Style Guide
DraftPen design system
Announcement Banners
Customizable announcement banners for displaying important messages to users
Current Live Banner
The banner currently displayed across the application
Component API
The AnnouncementBanner component accepts the following props:
| Prop | Type | Default | Description |
|---|---|---|---|
message | string | Required | The announcement message to display |
linkText | string | Optional | Text for the call-to-action link |
linkUrl | string | Optional | URL for the call-to-action link |
backgroundColor | string | bg-blue-600 | Tailwind background color class |
textColor | string | text-white | Tailwind text color class |
icon | ReactNode | Optional | Icon to display next to the message |
dismissible | boolean | false | Whether the banner can be dismissed |
storageKey | string | announcement-dismissed | localStorage key for dismissal state |
Examples
Various examples of announcement banners for different use cases
Feature Announcement
Announcing a new feature or tool
Promotional Banner
Special offers and promotions
Alert Banner
Important alerts and notifications
Dismissible Banner
Banner that can be dismissed by the user