BlocksAnnouncement Bar
Blocks
Announcement Bar
Thin ink strip that sits above the header — site-wide notice, with an optional link. Centered stacks the message and link together; span pins the message left and the link right.
Configurator
Your account has a new look — log in to explore updates
Usage
<AnnouncementBar
text="Your account has a new look — log in to explore updates"
align="center"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | Message shown in the bar. |
| linkLabel | string | "" | Optional link label. The link is omitted when this is empty. |
| linkHref | string | "" | Optional URL for the link. Falls back to # if a label is set without an href. |
| align | "center" | "span" | "center" | center groups the message and link in the middle; span puts the message on the left and the link on the right. |
| className | string | — | Additional classes, merged via tailwind-merge. |
Do's and Don'ts
Do
- ·Keep the message to one short line — the bar is a single uppercase strip, not a paragraph.
- ·Use span when the link is an action (Shop now, Learn more) so it reads as a pair: notice on the left, next step on the right.
- ·Leave link text and href empty when there's no destination — the bar still works as a notice on its own.
Don't
- ·Don't put it anywhere except the very top of the page — it's a site-wide notice, not an in-page callout.
- ·Don't stack more than one announcement bar on the same page.