CookieBanner

CookieBanner pergunta uma vez e lembra. Decida o que o seu produto realmente faz com cookies antes de escolher o texto — o padrão faz uma afirmação de LGPD em seu nome.

Exemplos

Aviso LGPD padrão

O banner é fixo no rodapé da viewport, então estes exemplos o montam a partir de um botão, e não no carregamento da página. Cada um usa o próprio storageKey e o limpa antes, senão o exemplo funcionaria exatamente uma vez por leitor.

Seu próprio texto

children substitui o aviso padrão inteiro. Diga o que você realmente armazena; um aviso de consentimento que descreve cookies que você não usa é pior do que nenhum.

Quando usar

Use CookieBanner quando o produto usa cookies que precisam de consentimento e a resposta deve persistir entre visitas.

Procure outra coisa quando:

Nada precisa de consentimento — não pergunte. Banner só para cookies essenciais é ruído.
A escolha pertence às configurações — o banner é da primeira visita; a configuração é onde alguém muda de ideia depois, e este componente não tem interface para isso.
A mensagem não é uma escolha — use Alert.

Acessibilidade

Renderiza role="region" com o nome "Cookie notice" por padrão. Passe aria-label para traduzir esse nome, algo especialmente útil ao substituir o texto padrão redigido para a LGPD.
Os rótulos das ações usam inglês por padrão. Passe essentialsLabel e acceptLabel para traduzir "Only essentials" e "Accept all" sem substituir o texto do aviso.
As duas ações são botões reais na ordem normal de tabulação. O banner não prende o foco nem bloqueia a página, então dá para continuar lendo e responder depois.
Ele lê o localStorage dentro de um effect e renderiza null até conseguir, então não aparece no HTML do servidor nem na primeira pintura do cliente. Isso evita divergência de hidratação, e significa que o banner chega um quadro atrasado — não construa layout que dependa da altura dele.
Uma vez respondido, ele não volta. Ofereça o seu próprio caminho para rever a escolha.

API e código

Nome	Tipo	Obrigatória	Descrição
`'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({ … })"

Opção	Tipo	Obrigatória	Descrição
`storageKey`	`string`	—

O aviso e as ações são irmãos dentro do container fixo:

html

<div class="lyra-cookies" role="region" aria-label="Cookie notice">
  <p class="lyra-cookies__text">
    Usamos cookies para melhorar sua experiência conforme a LGPD.
    <a href="/privacy">Política de privacidade</a>
  </p>
  <div class="lyra-cookies__actions">
    <button class="lyra-btn lyra-btn--secondary lyra-btn--sm" type="button">Só essenciais</button>
    <button class="lyra-btn lyra-btn--primary lyra-btn--sm" type="button">Aceitar todos</button>
  </div>
</div>

<lyra:cookie-banner> Gerado do lyra-ds/blade v0.10.0.

O comportamento vem de lyraCookieBanner() — instale @lyra-ds/alpine e veja a aba HTML + Alpine.

Prop	Padrão	Obrigatória	Valores de exemplo
`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>