nuxt-x-affiliate
Offer Banner
Dismissible site-wide promo / info / warning / success banner — persists dismissal via cookie.
Offer Banner
The XAFOfferBanner component renders a thin, dismissible banner across the top of the page — site-wide offers, holiday promos, free-shipping notices, important announcements. Dismissal is persisted via a cookie so the same reader doesn't see it again for the configured period.
Components
<XAFOfferBanner />
<XAFOfferBanner
title="Free shipping on orders over $35"
body="Limited time — through the end of the month."
cta-href="/shop"
cta-label="Shop now"
variant="info"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | required | Banner headline. |
body | string | — | Optional body copy. |
ctaHref | string | — | Optional CTA link. |
ctaLabel | string | "Learn more" | CTA button label. |
variant | 'info' | 'warning' | 'success' | 'promo' | 'promo' | Tone / color preset. |
dismissible | boolean | true | Show dismiss button. |
cookieName | string | "xaf_offer_dismissed" | Cookie name for dismissal state. |
cookieDays | number | 7 | Days until dismissal expires. |
Renders nothing if the dismissal cookie is already set. Safe to mount globally.
AI Context
component: XAFOfferBanner
package: "@xenterprises/nuxt-x-affiliate"
use-when: Dismissible site-wide promo / info / warning / success banner with cookie-persisted dismissal.