@tour-kit/announcementsComponents
AnnouncementBanner
AnnouncementBanner component: full-width persistent bar for system notices with dismiss button and action link support
AnnouncementBanner
A full-width bar at the top or bottom of the page. Best for persistent, non-blocking notices.
When to Use
- System maintenance notices
- Cookie consent
- Important non-urgent updates
- Promotions and offers
- Status messages
Basic Usage
import { AnnouncementsProvider, AnnouncementBanner } from '@tour-kit/announcements';
const announcements = [
{
id: 'maintenance',
variant: 'banner',
title: 'Scheduled maintenance tonight at 2 AM EST',
bannerOptions: {
position: 'top',
sticky: true,
intent: 'warning',
},
},
];
<AnnouncementBanner id="maintenance" />Banner Options
Prop
Type
Intent Colors
// Default - neutral gray
bannerOptions: { intent: 'default' }
// Info - blue
bannerOptions: { intent: 'info' }
// Success - green
bannerOptions: { intent: 'success' }
// Warning - yellow/orange
bannerOptions: { intent: 'warning' }
// Error - red
bannerOptions: { intent: 'error' }Complete Example
{
id: 'promo',
variant: 'banner',
title: 'Limited Time Offer: 50% off Pro plan',
primaryAction: {
label: 'Upgrade Now',
onClick: () => router.push('/pricing'),
},
secondaryAction: {
label: 'Learn More',
onClick: () => router.push('/pricing#features'),
},
bannerOptions: {
position: 'top',
sticky: true,
dismissable: true,
intent: 'success',
},
frequency: { type: 'interval', days: 7 },
}Sticky Positioning
// Stick to top when scrolling
bannerOptions: {
position: 'top',
sticky: true,
}
// Stick to bottom
bannerOptions: {
position: 'bottom',
sticky: true,
}Non-Dismissable
For critical persistent messages:
bannerOptions: {
dismissable: false, // No close button
}