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

O componente br-cookiebar é o orquestrador completo do GovBR-DS para aviso e gestão de consentimento de cookies, atendendo às exigências da LGPD (Lei Geral de Proteção de Dados).

Para que serve

• Aviso de privacidade e cookies: Informa com clareza à pessoa usuária sobre a coleta e finalidade de cookies no sistema.
• Gestão de consentimento: Permite aceitar todos os cookies, rejeitar os não essenciais ou gerenciar categorias de forma granular.
• Detalhamento transparente: Exibe a relação técnica de cookies utilizados por categoria com nome, validade e finalidade.

Quando utilizar

• Utilize quando:
  • A aplicação ou portal público utilizar cookies de sessão, rastreamento ou preferências que demandem consentimento explícito.
  • For necessário dar cumprimento às diretrizes de privacidade e proteção de dados pessoais (LGPD).
• Evite e prefira outro componente quando:
  • A notificação for apenas um alerta contextual ou mensagem simples de status sem relação com consentimento (prefira br-message ou br-notification).

Composição e Subcomponentes

Subcomponente	Papel	Regra de uso
br-cookiebar-cookie	Item de cookie. Descreve detalhadamente um cookie específico.	Inserido dentro de um br-cookiebar-group.
br-cookiebar-group	Categoria de cookies. Agrupa cookies por finalidade com controle de seleção.	Inserido no corpo de opções do br-cookiebar.
br-cookiebar-header	Cabeçalho informativo. Exibe título e mensagem inicial de contexto.	Inserido no slot de topo do br-cookiebar.
br-cookiebar-link	Link informativo. Atalho para a Política de Privacidade e termos.	Usado no cabeçalho ou notas do br-cookiebar.
br-cookiebar-note-group	Agrupador de notas. Organiza múltiplas notas informativas.	Posicionado na área de notas do br-cookiebar.
br-cookiebar-note	Nota complementar. Mensagem ou aviso jurídico adicional.	Inserido individualmente ou em br-cookiebar-note-group.
br-cookiebar	Orquestrador principal. Gerencia abertura, fechamento, persistência e emissão dos eventos de consentimento.	Declarado como contêiner do aviso de cookies na aplicação.

Como os subcomponentes se relacionam

O br-cookiebar atua como orquestrador central. Ele controla a visualização do painel (modo compacto ou expandido), agrupa as categorias (br-cookiebar-group) com seus respectivos cookies (br-cookiebar-cookie) e disponibiliza os botões de ação para aceitar todos, rejeitar ou salvar preferências. A aplicação consome eventos unificados de consentimento disparados pelo componente pai.

Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o Design System do GovBR.

Exemplo(s)

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

Desktop (100%)

Tablet - 768px

iPhone (iOS) - 390x844

Android - 360x800

Padrão

Compartilhar URL

Ativar movimento reduzido

Mudar fundo

Abrir no StackBlitz

Mais opções

Tela cheia

Carregando preview…

HTML

Controles do componente

Console: logs, eventos e erros

Angular (Somente leitura)

React (Somente leitura)

Vue (Somente leitura)

Acessibilidade

Recolher controles e código

Desfazer alteração

Refazer alteração

Comparar alterações

Formatar código

Resetar código para o estado inicial

Escolher formato para copiar

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. Valores inválidos usam default. - 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'

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.

Dependências

Subcomponentes

• br-cookiebar-cookie
• br-cookiebar-group
• br-cookiebar-header
• br-cookiebar-link
• br-cookiebar-note
• br-cookiebar-note-group

Depende de

• br-checkbox
• br-button
• br-message
• br-icon

Gráfico

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>