CookieBanner

CookieBanner asks once and remembers. Decide what your product actually does with cookies before choosing the copy — the default text makes an LGPD claim on your behalf.

Examples

Default LGPD notice

The banner is fixed to the bottom of the viewport, so these examples mount it from a button rather than on page load. Each one uses its own storageKey and clears it first, or the example would work exactly once per reader.

Your own copy

children replaces the default notice entirely. Say what you actually store; a consent notice that describes cookies you do not set is worse than none.

When to use

Use CookieBanner when the product sets cookies that need consent, and the answer should persist across visits.

Reach for something else when:

Nothing needs consent — do not ask. A banner for essential cookies alone is noise.
The choice belongs in settings — a banner is for the first visit; the setting is where someone changes their mind later, and this component has no UI for that.
The message is not a choice — use Alert.

Accessibility

Renders role="region" named "Cookie notice" by default. Pass aria-label to translate that name, which is especially useful when replacing the default Brazilian LGPD wording.
The action labels default to English. Pass essentialsLabel and acceptLabel to translate "Only essentials" and "Accept all" without replacing the notice copy.
Both actions are real buttons in the normal tab order. The banner does not trap focus and does not block the page, so a visitor can keep reading and answer later.
It reads localStorage in an effect and renders null until it has, so it is absent from the server-rendered HTML and from the first client paint. That avoids a hydration mismatch, and it means the banner arrives a frame late — do not build layout that depends on its height.
Once answered, it does not come back. Provide your own way to revisit the choice.

API and code

Name	Type	Required	Description
`'aria-label'`	`string`	—	Accessible name for the region. Default: `"Cookie notice"`. Translate it in a localized interface.
`storageKey`	`string`	—	Browser storage key used to persist the visitor's choice.
`policyHref`	`string`	—	Optional URL for the privacy policy linked from the default copy.
`onAccept`	`() => void`	—	Called after the visitor accepts all cookies.
`onEssentials`	`() => void`	—	Called after the visitor keeps only essential cookies.
`essentialsLabel`	`string`	—	Visible label of the essentials-only button. Default: `"Only essentials"`.
`acceptLabel`	`string`	—	Visible label of the accept-all button. Default: `"Accept all"`.
`children`	`ReactNode`	—	Custom banner copy that replaces the default LGPD notice.

x-data="lyraCookieBanner({ … })"

Option	Type	Required	Description
`storageKey`	`string`	—

The notice and the actions are siblings inside the fixed container:

html

<div class="lyra-cookies" role="region" aria-label="Cookie notice">
  <p class="lyra-cookies__text">
    We use cookies to improve your experience in accordance with LGPD.
    <a href="/privacy">Privacy policy</a>
  </p>
  <div class="lyra-cookies__actions">
    <button class="lyra-btn lyra-btn--secondary lyra-btn--sm" type="button">Only essentials</button>
    <button class="lyra-btn lyra-btn--primary lyra-btn--sm" type="button">Accept all</button>
  </div>
</div>

<lyra:cookie-banner> Generated from lyra-ds/blade v0.10.0.

The behavior comes from lyraCookieBanner() — install @lyra-ds/alpine and see the HTML + Alpine tab.

Prop	Default	Required	Example values
`ariaLabel`	`'Cookie notice'`	—	—
`storageKey`	`'lyra-cookie-consent'`	—	—
`policyHref`	`null`	—	—
`essentialsLabel`	`'Only essentials'`	—	—
`acceptLabel`	`'Accept all'`	—	—

blade

<lyra:cookie-banner
    policy-href="/privacy"
    essentials-label="Only essentials"
    accept-label="Accept all"
>
    We use cookies to measure how the documentation is used.
</lyra:cookie-banner>