A one-line, time-boxed notice at the very top of a site — “Closed 1–3 April for the holiday”, “v2.4 is out”. Server component; the optional dismiss button is a ~0.5 KB island that writes a cookie your server can read. Always solid, even in glass mode.
Closed 1–3 April for Eid — open again Thursday from noon.Holiday hours
Installation
The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";
Usage
import { AnnouncementBar, Navbar } from "@vamos-ui/react/blocks";
<AnnouncementBar
text="Closed 1–3 April for Eid — open again Thursday from noon."
link={{ href: "/hours", label: "Holiday hours" }}
dismissible
dismissed={cookies().has(cookieName)} // optional: server-side read
/>
<Navbar … />
// JSON (layout.header): { "type": "announcement", "variant": "inline", "props": { "text": "…", "tone": "accent" } }role="region" with a localized name; the bar sits above the skip link target so focus lands on #content after dismissing.
Examples
Centred, dismissible release notice
Dismissing hides the bar, writes vb_ann_<hash> and moves focus to #content. New copy produces a new hash, so the next notice shows again.
Releasev2.4 is out: shared inboxes and WhatsApp templates.What’s new
Warning tone
neutral = ink strip, accent = accent strip, warning = a 14% warning tint with a hairline.
The hammam is closed for maintenance 12–14 November. Massage and facial rooms stay open.Book another treatment
Scheduled
from / until (ISO, until exclusive). In JSON use the node's schedule. Cached pages need revalidation at the boundaries — the bar can't change a page that isn't re-rendered.
New year’s eve: one sitting at 20:00, set menu ₺4,800 per person.Reserve
The second bar is outside its schedule, so only one bar is shown.
API
AnnouncementBar
| Prop | Type | Default |
|---|---|---|
variantinline: text at the start, link right after it, dismiss at the end. centered: a mono label, centred text + link. | "inline" | "centered" | "inline" |
textOne line, ≤ 120 characters (schema). | ReactNode | — |
linkUnderlined link with a mirrored-in-RTL arrow. | { href; label; newTab? } | — |
toneStrip colour. Always solid. | "neutral" | "accent" | "warning" | "neutral" |
dismissibleAdds the dismiss island (labelled “Dismiss announcement”). | boolean | false |
dismissedThe app read the cookie server-side: render nothing. | boolean | false |
storageKeyCookie name. Defaults to a hash of the text + link label. | string | vb_ann_<hash> |
from / untilHidden before from and from until (exclusive). | string (ISO datetime) | — |
nowPin the clock for previews and tests. | Date | string | render time |
labelMono label in centered. | ReactNode | "Notice" |
labelsannouncement, notice, dismiss strings (site1LabelsTr for Turkish). | Partial<BlockLabels & Site1Labels> | — |
anchor / id / className / editMode / components / localeShared block props. | BlockBaseProps | — |