Components
Cookie Consent
A GDPR cookie banner with accept / reject / customize, persisted to localStorage.
We value your privacy
We use cookies to enhance your experience, analyze traffic, and personalize content. You can accept all, reject non-essential, or manage your preferences. Cookie policy
<x-ui.cookie-consent :demo="true" />
Customizable
We value your privacy
We use cookies to enhance your experience, analyze traffic, and personalize content. You can accept all, reject non-essential, or manage your preferences. Cookie policy
<x-ui.cookie-consent :demo="true" :customizable="true" />
API Reference
Props, slots and exposed methods for
<x-ui.cookie-consent>.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
position |
string
|
'bottom'
|
Where the fixed banner sits on the page. Ignored when demo is true (the banner renders in-flow). "bottom" and "top" are wide centered bars; the corner placements are narrower cards.
bottom
bottom-start
bottom-end
top
|
customizable |
bool
|
false
|
Show a "Customize" toggle that reveals per-category switches (necessary, analytics, marketing) and a "Save preferences" button. |
demo |
bool
|
false
|
Render in-flow (static, always visible) and ignore localStorage, so the banner always shows. Use for docs and previews; leave false in production so the choice persists. |
Slots
| Slot | Description |
|---|---|
default |
Optional replacement for the default consent message. When empty, a built-in privacy blurb is shown. A "Cookie policy" link is always appended after your text. |
Methods
Available on the component's Alpine scope — call them from markup in the slot
(e.g. @click="…").
| Method | Description |
|---|---|
acceptAll() |
Turns on every category, persists the choice, and hides the banner. |
reject() |
Keeps only the locked (necessary) categories on, persists the choice, and hides the banner. |
savePrefs() |
Persists the current per-category switch selections and hides the banner. |