📢 Component
Announcement Bar
Slim full-width bar for promotions and site-wide announcements. Customisable colours and optional link.
Live Preview
Usage
import AnnouncementBar from '@chronos-ui/core/react/AnnouncementBar';
import '@chronos-ui/core/theme.css';
<AnnouncementBar
message="🚀 Free shipping on orders over $75 — Shop the sale"
backgroundColor="#7c3aed"
textColor="#ffffff"
mapLinks={[{ url: '/sale' }]}
/><script lang="ts">
import AnnouncementBar from '@chronos-ui/core/svelte/AnnouncementBar.svelte';
</script>
<AnnouncementBar
message="🚀 Free shipping on orders over $75"
backgroundColor="#7c3aed"
textColor="#ffffff"
mapLinks={[{ url: '/sale' }]}
/><script type="module"
src="node_modules/@chronos-ui/core/webcomponents/AnnouncementBar.js"></script>
<announcement-bar
message="Free shipping on orders over $75"
background-color="#7c3aed"
text-color="#ffffff"
></announcement-bar>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| message required | string | — | The announcement text content |
| mapLinks | { url: string }[] | undefined | When provided, wraps message in an anchor using first entry's URL |
| backgroundColor | string | undefined | CSS colour for the bar background (default: #8b5cf6) |
| textColor | string | undefined | CSS colour for the message text (default: #ffffff) |
| className | string | undefined | Additional CSS class names on the root element |
Place the
AnnouncementBar at the very top of your layout, above the site header, for maximum visibility.