nuxt-x-marketing
LayoutAnnouncementBar
Dismissible top-of-page announcement bar with badge, message, icon, and CTA link.
LayoutAnnouncementBar
A slim dismissible bar rendered above the navbar. Dismissed state is persisted to localStorage using storageKey. Supports color variants and an optional CTA link.
Components
<XMarkLayoutAnnouncementBar />
A slim dismissible bar rendered above the navbar. Dismissed state is persisted to localStorage using storageKey. Supports color variants and an optional CTA link.
<XMarkLayoutAnnouncementBar
message="We just launched v2.0 with major performance improvements."
badge="New"
icon="i-lucide-rocket"
link="/changelog"
link-text="Read the changelog"
variant="primary"
:dismissible="true"
storage-key="announcement-v2"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
message | String | Default announcement text | Main message |
badge | String | '' | Bold label shown before the message |
icon | String | '' | Lucide icon name |
link | String | '' | CTA link URL |
linkText | String | 'Learn more' | CTA link label |
variant | String | 'primary' | Color variant: 'primary', 'neutral', 'success', 'warning', 'error' |
dismissible | Boolean | true | Show close button |
storageKey | String | '' | localStorage key to persist dismissed state |
AI Context
category: Layout
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkLayoutAnnouncementBar
use-when: >
Surfacing a time-sensitive promotion, product launch, or notice above the
navbar. Dismissed state is persisted so it only shows once per user.
typical-page-section: Above the navbar, at the very top of the page.