Tab Item

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.

Subcomponente de Composição

O br-tab-item representa uma aba individual navegável. Deve ser utilizado dentro do componente orquestrador <br-tab>.

Visão Geral

Subcomponente individual de br-tab, responsável por representar conjuntamente a aba de seleção e o respectivo painel de conteúdo associado.

Papel na composição

• Define o título ou rótulo da aba (propriedade label ou slot label), ícones de apoio e o estado de seleção (active) ou desativação (disabled).
• Contém o corpo de elementos que compõem o painel renderizado quando a aba é selecionada.

Regra de uso e relacionamento

Deve ser declarado dentro do slot padrão do orquestrador br-tab. O componente pai é responsável por montar a barra de botões acessíveis, sincronizar os atributos WAI-ARIA e controlar a alternância de visibilidade do painel. Não deve ser usado isoladamente sem o br-tab pai.

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

Propriedades

active

Atributo	active
Descrição	Estado ativo canônico. Quando informado, tem precedência sobre isActive.
Tipo	boolean
Valor padrão	---

colorMode

Atributo	color-mode
Descrição	Define se o Tab usará um esquema de cores escuro
Tipo	"dark"
Valor padrão	---

counter

Atributo	counter
Descrição	Define contador do item de tab (exibido abaixo do botão)
Tipo	string
Valor padrão	---

icon

Atributo	icon
Descrição	Ícone da aba como identificador Iconify (ex.: fa6-solid:bell), renderizado em SVG pelo br-icon. Para ícones por classe CSS (ex.: Font Awesome), use o slot icon-{id} do br-tab, a forma preferida: <i slot="icon-avisos" class="fas fa-bell" aria-hidden="true"></i>. O slot tem precedência sobre esta prop. Uso descontinuado: classes CSS nesta prop (ex.: fas fa-bell) não são exibidas no Shadow DOM, geram aviso e devem migrar para o slot icon-{id}. Identificadores Iconify continuam suportados.
Tipo	string
Valor padrão	---

iconOnly

Atributo	icon-only
Descrição	Exibe apenas o ícone. Quando informado, tem precedência sobre onlyIcon.
Tipo	boolean
Valor padrão	---

isActive Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.

Atributo	is-active
Depreciação	Use active.
Descrição	Define se o item de tab está ativo/visível
Tipo	boolean
Valor padrão	false

label

Atributo	label
Descrição	Texto canônico do item. Quando informado, tem precedência sobre tabItemTitle.
Tipo	string
Valor padrão	---

onlyIcon Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.

Atributo	only-icon
Depreciação	Use iconOnly.
Descrição	Define se exibe apenas o ícone, sem texto
Tipo	boolean
Valor padrão	false

tabItemId Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.

Atributo	tab-item-id
Depreciação	Use o atributo nativo id.
Descrição	Identificador único do item da tab. Caso não seja fornecido, um ID gerado automaticamente será usado.
Tipo	string
Valor padrão	generateUniqueId()

tabItemTitle Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.

Atributo	tab-item-title
Depreciação	Use label.
Descrição	Define o título do item de tab que aparece no botão de navegação
Tipo	string
Valor padrão	---

Slots

Nome	Descrição
"default"	Slot para o conteúdo do item da aba.

Eventos

Evento	Descrição	Depreciação	Propagação
brTabItemPropsChange	Evento disparado quando as propriedades do tab-item mudam. O componente pai (br-tab) escuta este evento para atualizar a navegação.	---	true

Dependências

Componente pai

• br-tab