Copiar página como Markdown para IA

Cookiebar

Componente estável e recomendada para novos projetos.

Anatomia, uso, comportamento visual e recomendações conceituais são mantidos pelo Padrão Digital de Governo. Esta página documenta a implementação Web Components e sua API executável.

Visão Geral

Componente de gestão de consentimento de cookies (LGPD), obrigatório em sites e aplicativos do Governo Federal que coletam dados de usuários.

Apresenta duas etapas visuais:

default – barra inferior com texto informativo e botões de ação;
open – painel de tela cheia com lista de classes de cookies configuráveis.

A persistência do consentimento é responsabilidade do consumidor: ouça o evento brCookiebarAccept e armazene o payload onde desejar (localStorage, cookie HTTP, API etc.).

Para a documentação completa, consulte o Design System do GovBR.

Exemplo(s)

Padrão em que o usuário pode configurar as preferências de cookies individualmente.

Compartilhar URL

Mudar fundo

Abrir no StackBlitz

Tela cheia

Recolher controles e código

Fluxo, camada e modalidade

O aviso simples permanece como barra fixed, fora do fluxo da página. Com scrim ou no modo open, o container usa <dialog> modal e a top layer quando disponível. A máscara ocupa a subcamada local 0 e o painel a 1, garantindo que cliques e foco alcancem sempre os controles do painel.

Sem showModal(), o cookiebar usa a camada bloqueadora 4. Nesse fallback CSS, mantenha somente um bloqueador legado ativo por vez.

Propriedades

acceptButton

Atributo	`accept-button`
Descrição	Texto do botão primário de aceite. Padrão: `Aceitar`.
Tipo	`string`
Valor padrão	`'Aceitar'`

allAlertMessage

Atributo	`all-alert-message`
Descrição	Mensagem exibida abaixo do checkbox geral quando está desmarcado ou com seleção parcial.
Tipo	`string`
Valor padrão	---

allOptOut

Atributo	`all-opt-out`
Descrição	Define se o cookiebar opera no padrão opt-out (`true`, recomendado) ou opt-in (`false`). - opt-out (`true`): botão secundário "Definir Cookies"; usuário pode configurar cookies. - opt-in (`false`): botão secundário "Ver Política de Cookies"; painel é somente leitura.
Tipo	`boolean`
Valor padrão	`true`

closeLabel

Atributo	`close-label`
Descrição	`aria-label` do botão fechar exibido no canto do painel expandido (`mode="open"`). Permite traduzir o rótulo para outros idiomas.
Tipo	`string`
Valor padrão	`'Fechar'`

cookieGroupsLabel

Atributo	`cookie-groups-label`
Descrição	Rótulo do título da seção de grupos de cookies.
Tipo	`string`
Valor padrão	`'Classes de cookies'`

customId

Atributo	`custom-id`
Descrição	Identificador único; gerado automaticamente quando omitido.
Tipo	`string`
Valor padrão	`generateUniqueId()`

defaultPanelLabel

Atributo	`default-panel-label`
Descrição	`aria-label` da barra de aviso de cookies (`mode="default"`). Deve descrever o propósito da região de forma sucinta (ex: "Aviso de cookies").
Tipo	`string`
Valor padrão	`'Aviso de cookies'`

infoText

Atributo	`info-text`
Descrição	Texto informativo exibido na barra inferior (modo default), descrevendo a política de cookies. (obrigatório)
Tipo	`string`
Valor padrão	---

linksLabel

Atributo	`links-label`
Descrição	`aria-label` do elemento `<nav>` que envolve os links complementares no painel expandido. Permite traduzir o rótulo para outros idiomas.
Tipo	`string`
Valor padrão	`'Links complementares'`

mode

Atributo	`mode`
Descrição	Estado visual atual do painel. - `default`: barra inferior com texto e botões. - `open`: painel de tela cheia com grupos de cookies configuráveis.
Tipo	`"default" \| "open"`
Valor padrão	`'default'`

optInButton

Atributo	`opt-in-button`
Descrição	Texto do botão secundário quando `all-opt-out="false"`.
Tipo	`string`
Valor padrão	`'Ver Política de Cookies'`

optOutButton

Atributo	`opt-out-button`
Descrição	Texto do botão secundário quando `all-opt-out="true"`.
Tipo	`string`
Valor padrão	`'Definir Cookies'`

panelLabel

Atributo	`panel-label`
Descrição	`aria-label` do painel expandido (`mode="open"`), que possui `role="dialog"`. Leitores de tela anunciam este texto ao entrar no diálogo modal de configuração de cookies. Deve descrever o propósito do diálogo de forma sucinta (ex: "Configurações de cookies").
Tipo	`string`
Valor padrão	`'Configurações de cookies'`

rejectButton

Atributo	`reject-button`
Descrição	Texto do botão de rejeição dos cookies não obrigatórios. Exibido apenas quando `show-reject-button="true"`.
Tipo	`string`
Valor padrão	`'Rejeitar não obrigatórios'`

scrim

Atributo	`scrim`
Descrição	Quando `true`, exibe uma camada semitransparente (scrim) sobre o conteúdo da página abaixo do painel default, sinalizando que o cookiebar requer atenção. Efeito no foco: com `scrim=true`, o atributo `inert` é aplicado nos irmãos do cookiebar no DOM, prendendo o foco e o cursor virtual do leitor de tela dentro do painel default enquanto ele estiver visível. Com `scrim=false` (padrão), nenhum trap é ativado — o usuário pode navegar livremente pela página, em conformidade com WCAG 2.1.2 (No Keyboard Trap). Use `scrim=true` apenas quando o cenário de negócio exigir que a decisão sobre cookies seja tomada antes de qualquer outra interação. No modo `open` (diálogo modal), o `inert` é aplicado independentemente do valor de `scrim`.
Tipo	`boolean`
Valor padrão	`false`

selectAll

Atributo	`select-all`
Descrição	Estado inicial do checkbox "Selecionar tudo". Quando `true`, todos os grupos opt-out iniciam selecionados.
Tipo	`boolean`
Valor padrão	`false`

selectAllLabel

Atributo	`select-all-label`
Descrição	Texto do checkbox geral quando está totalmente selecionado (ação: desselecionar).
Tipo	`string`
Valor padrão	`'Selecionar tudo'`

show

Atributo	`show`
Descrição	Controla a visibilidade do componente. O consumidor é responsável por definir este valor com base na persistência do consentimento (ex: verificar se já existe um cookie de consentimento salvo).
Tipo	`boolean`
Valor padrão	`false`

showRejectButton

Atributo	`show-reject-button`
Descrição	Quando `true`, exibe o botão "Rejeitar não obrigatórios" nos painéis default e open. Cookies de grupos com `group-opt-out="false"` (sempre ativos) não são afetados.
Tipo	`boolean`
Valor padrão	`false`

unselectAllLabel

Atributo	`unselect-all-label`
Descrição	Texto do checkbox geral quando está desmarcado ou indeterminado (ação: selecionar).
Tipo	`string`
Valor padrão	`'Desselecionar tudo'`

Migração de `<br-cookiebar>` (1.x → 2.x)

A 1.x modelava o conteúdo da cookiebar em um objeto e controlava sua abertura com open. Na 2.x, consentimento, painel e ações são expressos por propriedades e composição próprias.

Propriedades e composição

API 1.x	API 2.x	Ação na migração
—	`mode`, `scrim`, `selectAll`	Configure o fluxo de consentimento da versão atual.
`content`	slots e labels atuais	Mova o texto e as informações para a composição da cookiebar.
`lang`	—	Remova; traduza os textos por labels e conteúdo da aplicação.
`open`	`show`	Renomeie o estado de visibilidade.

Use os métodos close, openDefault e openPanel, além de getSelectedCookies, para integrar o consentimento. Trate os eventos atuais da cookiebar em vez do evento report da 1.x.

Exemplo

1.x:

<br-cookiebar :content="content" lang="pt-BR" open></br-cookiebar>

2.x:

<br-cookiebar show mode="default" scrim>
  <span slot="description">Usamos cookies para melhorar sua experiência.</span>
</br-cookiebar>

Slots

Nome	Descrição
`"actions"`	Recebe botões de ação. Se vazio, o componente renderiza os botões padrão.
`"default"`	Recebe os subcomponentes `br-cookiebar-group`, `br-cookiebar-note-group` e `br-cookiebar-note`.
`"header"`	Recebe `br-cookiebar-header` ou HTML livre.
`"links"`	Recebe links complementares (`br-cookiebar-link` ou elementos `<a>` livres).

Eventos

Evento	Descrição	Depreciação	Propagação
`brCookiebarAccept`	Sinal emitido quando o usuário clica em Aceitar. Não carrega payload — ouça `brCookiebarResponse` para obter o estado completo de consentimento.	---	true
`brCookiebarClose`	Emitido quando o painel recolhe para modo default.	---	true
`brCookiebarHide`	Emitido quando o componente é ocultado (`show` → false).	---	true
`brCookiebarOpen`	Emitido quando o painel expande para modo open.	---	true
`brCookiebarPolicyClick`	Emitido quando o usuário clica no botão secundário no modo opt-in (`allOptOut=false`). O consumidor é responsável por navegar para a página de Política de Cookies.	---	true
`brCookiebarReject`	Sinal emitido quando o usuário clica em "Rejeitar não obrigatórios". Não carrega payload — ouça `brCookiebarResponse` para obter o estado completo de consentimento.	---	true
`brCookiebarResponse`	Emitido após `brCookiebarAccept` ou `brCookiebarReject`, com o estado final de consentimento. É o único evento que carrega `CookiebarOutputData` — use-o para persistir o consentimento (localStorage, cookie HTTP, API etc.). Não é disparado durante interações com checkboxes e switches internos.	---	true
`brCookiebarShow`	Emitido quando o componente se torna visível (`show` → true).	---	true

Métodos

close

Descrição	Oculta o cookiebar.
Assinatura	`close() => Promise<void>`
Parâmetros	---

getSelectedCookies

Descrição	Retorna o JSON com o estado atual de seleção de todos os grupos e cookies.
Assinatura	`getSelectedCookies() => Promise<CookiebarOutputData>`
Parâmetros	---

openDefault

Descrição	Exibe o cookiebar no modo `default` (barra inferior).
Assinatura	`openDefault() => Promise<void>`
Parâmetros	---

openPanel

Descrição	Exibe o cookiebar diretamente no modo `open` (painel de tela cheia).
Assinatura	`openPanel() => Promise<void>`
Parâmetros	---

CSS Shadow Parts

Nome	Descrição
`"body"`	Corpo do painel aberto (com rolagem).
`"container"`	Container raiz do componente.
`"default-panel"`	Painel fechado (modo default).
`"footer"`	Rodapé com botões de ação.
`"header"`	Cabeçalho do painel aberto.
`"open-panel"`	Painel expandido (modo open).
`"scrim"`	Camada de sobreposição opcional.

Cookiebar

Visão Geral

Exemplo(s)

Fluxo, camada e modalidade

Propriedades

acceptButton

allAlertMessage

allOptOut

closeLabel

cookieGroupsLabel

customId

defaultPanelLabel

infoText

linksLabel

mode

optInButton

optOutButton

panelLabel

rejectButton

scrim

selectAll

selectAllLabel

show

showRejectButton

unselectAllLabel

Migração de `<br-cookiebar>` (1.x → 2.x)

Propriedades e composição

Exemplo

Slots

Eventos

Métodos

close

getSelectedCookies

openDefault

openPanel

CSS Shadow Parts

Dependências

Subcomponentes

Depende de

Gráfico

Visão Geral​

Exemplo(s)​

Fluxo, camada e modalidade​

Propriedades​

acceptButton​

allAlertMessage​

allOptOut​

closeLabel​

cookieGroupsLabel​

customId​

defaultPanelLabel​

infoText​

linksLabel​

mode​

optInButton​

optOutButton​

panelLabel​

rejectButton​

scrim​

selectAll​

selectAllLabel​

show​

showRejectButton​

unselectAllLabel​

Migração de <br-cookiebar> (1.x → 2.x)​

Propriedades e composição​

Exemplo​

Slots​

Eventos​

Métodos​

close​

getSelectedCookies​

openDefault​

openPanel​

CSS Shadow Parts​

Dependências​

Subcomponentes​

Depende de​

Gráfico​

Visão Geral

Exemplo(s)

Fluxo, camada e modalidade

Propriedades

acceptButton

allAlertMessage

allOptOut

closeLabel

cookieGroupsLabel

customId

defaultPanelLabel

infoText

linksLabel

mode

optInButton

optOutButton

panelLabel

rejectButton

scrim

selectAll

selectAllLabel

show

showRejectButton

unselectAllLabel

Migração de `<br-cookiebar>` (1.x → 2.x)

Propriedades e composição

Exemplo

Slots

Eventos

Métodos

close

getSelectedCookies

openDefault

openPanel

CSS Shadow Parts

Dependências

Subcomponentes

Depende de

Gráfico