Banner
v1.0.18Updated 19 Oct 2026Slim full-width promo / announcement / cookie banner strip. Copy-paste block; baked-in demo content (edit the JSX to customise).
Preview
Live · 15 stories▸Why this is recommendedbannerannouncementpromocookie+3
Banner — announcement.
- ✓Top-of-page announcements
- ✓Promo / sale bars
- ✓Cookie consent
- Announcement, cookie-consent and promo layouts
- Dismissable strip with optional CTA
- Self-contained — no required props
- No dead controls: the call to action renders ONLY when the caller gives it a destination (ctaHref) or a handler (onCtaClick), and nothing at all otherwise. It used to ship a hardwired href="#" that looked clickable and did nothing
- A destination makes the CTA an anchor; a handler alone makes it a real type="button" button. Either way it carries data-slot="banner-cta"
- Client-side routing: pass `linkComponent` (next/link, React Router Link) and every row that has an href renders through the host app link component instead of a plain anchor, which would reload the whole document (fb_bf7dc63a)
- BannerNewsletterStrip hands the typed address to onSubscribe instead of discarding it
- i18n: labels prop overrides every built-in string; merged over DEFAULT_BANNER_LABELS
- ✕Long-form messages (use Alert)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
classNameOptional wrapper class override
—openControlled visibility; the strip then never hides itself and the caller reacts to onDismiss.
—defaultOpenInitial visibility when uncontrolled. Defaults to true.
—onDismissFired when the user dismisses the strip.
—ctaHrefWhere the call to action goes. Without this (and without onCtaClick) NO call to action renders — the strip used to ship a dead href="#" link. MCP feedback fb_bf7dc63a.
—onCtaClickWhat the call to action does. Safe to combine with ctaHref (it fires before navigation); on its own it makes the CTA a real button. Receives the click EVENT so a routed host can preventDefault and route itself.
—onSubscribeBannerNewsletterStrip only: receives the address the visitor typed on submit. Without it the strip still shows its success message but the address goes nowhere.
—linkComponentThe host app link component for the call to action when it has a ctaHref (next/link, React Router Link). Defaults to a plain anchor, which in a routed app reloads the whole document. MCP feedback fb_bf7dc63a.
—labelsOverride every built-in string (region names, headline, body, CTA text, dismiss aria-labels) for i18n or copy customization. Merged over DEFAULT_BANNER_LABELS. cookieLead / cookieConsentLead are the clause that introduces the policy link and show only with it.
—