Item

Visão Geral

Design System

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

Exemplos

Densidade

Carregando exemplo

Código fonte editável

Copiar código

Resetar exemplo

Abrir no StackBlitz

Alternar fundo do preview

Selecionável

Carregando exemplo

Código fonte editável

Copiar código

Resetar exemplo

Abrir no StackBlitz

Alternar fundo do preview

Estado

Carregando exemplo

Código fonte editável

Copiar código

Resetar exemplo

Abrir no StackBlitz

Alternar fundo do preview

Propriedades

customId

Atributo	custom-id
Descrição	Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
Tipo	string
Valor padrão	br-item-${itemId++}

density

Atributo	density
Descrição	Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.
Tipo	"large" | "medium" | "small"
Valor padrão	'medium'

disabled

Atributo	disabled
Descrição	Desativa o item, tornando-o não interativo.
Tipo	boolean
Valor padrão	false

href

Atributo	href
Descrição	URL ou caminho para o qual o usuário será direcionado ao clicar no item. Quando definido, o item será renderizado como um link.
Tipo	string
Valor padrão	---

isActive

Atributo	is-active
Descrição	Indica se o item está no estado ativo. Se definido como verdadeiro, o item será exibido como ativo.
Tipo	boolean
Valor padrão	false

isButton

Atributo	is-button
Descrição	Quando definido como true, o item será tratado como um botão.
Tipo	boolean
Valor padrão	false

isInteractive

Atributo	is-interactive
Descrição	Marca o item como interativo, permitindo que toda a superfície do item seja clicável.
Tipo	boolean
Valor padrão	false

isSelected

Atributo	is-selected
Descrição	Indica se o item está no estado selecionado. Se definido como verdadeiro, o item será exibido como selecionado.
Tipo	boolean
Valor padrão	false

target

Atributo	target
Descrição	Define o alvo do link quando href está presente. Pode ser: - _blank para abrir em uma nova aba, - _self para abrir na mesma aba, - _parent para abrir na aba pai, - _top para abrir na aba superior.
Tipo	"_blank" | "_parent" | "_self" | "_top"
Valor padrão	---

type

Atributo	type
Descrição	Tipo do botão, aplicável apenas se isButton for true. Pode ser: - 'submit' para enviar um formulário, - 'reset' para redefinir um formulário, - 'button' para um botão padrão.
Tipo	"button" | "reset" | "submit"
Valor padrão	---

value

Atributo	value
Descrição	Define um valor associado ao br-item quando renderizado como um botão, utilizado em contextos de formulário.
Tipo	string
Valor padrão	---

Slots

Nome	Descrição
"default"	Área de conteúdo, podendo conter qualquer componente, exceto botões primários e componentes relacionados à navegação (como carrosséis, paginações, abas, menus, etc.).
"end"	Área de recursos complementares, podendo conter componentes interativos, metadados e informações adicionais.
"start"	Área de recursos visuais, podendo conter elementos como ícones, avatares e mídias.

Eventos

Evento	Descrição	Propagação
brDidClick	Evento customizado emitido quando o item é clicado, aplicável apenas se o item for um botão (<button>). Pode ser utilizado para ações personalizadas, exceto quando o item está desativado.	true
brDidSelect	Evento customizado aplicável para todos os tipos de elementos (div, button, a), emitido quando o item é selecionado e desde que a propriedade isInteractive esteja presente.	true

Métodos

setFocus

Assinatura	setFocus() => Promise<void>
Descrição	Define o foco no elemento interno do componente. Este método pode ser chamado externamente para garantir que o foco seja aplicado ao elemento correto.
Parâmetros	---

Dependências

Usado por

• br-breadcrumb
• br-footer-category
• br-footer-item
• br-header-function
• br-header-link
• br-pagination
• br-skiplink-item

Gráfico

Migração: Vue 1.x → Stencil 2.x

Propriedades

🟦 Propriedades renomeadas

Propriedade Vue	Propriedade Stencil	Descrição	Tipo	Padrão
active	is-active	Coloca o item como ênfase.	boolean	false
density	density	Define a densidade.	"large" | "medium" | "small"	'medium'
selected	is-selected	Indica se está selecionado.	boolean	false

🟥 Propriedades removidas

Propriedade	Descrição	Tipo	Padrão
hover	Efeito Hover.	boolean	false
open	Indica se está aberto/fechado.	boolean	false
title	Título visível.	string	undefined

Eventos

🟦 Eventos renomeados

Evento Vue	Evento Stencil	Descrição
toggle-open	---	Disparado quando open é modificada (removido).
toggle-selected	brDidSelectedChange	Emitido quando selected é modificada.