Tag

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

Contador

Carregando exemplo

Código fonte editável

Copiar código

Resetar exemplo

Abrir no StackBlitz

Alternar fundo do preview

Densidade

Carregando exemplo

Código fonte editável

Copiar código

Resetar exemplo

Abrir no StackBlitz

Alternar fundo do preview

Ícones

Carregando exemplo

Código fonte editável

Copiar código

Resetar exemplo

Abrir no StackBlitz

Alternar fundo do preview

Interação

Carregando exemplo

Código fonte editável

Copiar código

Resetar exemplo

Abrir no StackBlitz

Alternar fundo do preview

Status

Carregando exemplo

Código fonte editável

Copiar código

Resetar exemplo

Abrir no StackBlitz

Alternar fundo do preview

Propriedades

ariaDescribedby

Atributo	aria-describedby
Descrição	ID do elemento que fornece descrição adicional da tag. Referencia um elemento na página que contém informações complementares sobre a tag. A descrição é lida após o conteúdo principal, fornecendo contexto extra aos usuários de leitores de tela. Exemplo: aria-describedby="help-status" onde existe Aguardando aprovação
Tipo	string
Valor padrão	null

ariaLabel

Atributo	aria-label
Descrição	Rótulo personalizado para leitores de tela. Quando fornecido, substitui completamente o texto visível para usuários de leitores de tela. Útil quando o texto visível não é suficientemente descritivo (ex: ícones, abreviações).
Tipo	string
Valor padrão	null

bgColor

Atributo	bg-color
Descrição	A propriedade 'color' permite definir a cor do componente. Aceita valores como 'red', 'blue', entre outros, e é refletida no DOM.
Tipo	string
Valor padrão	''

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-tag-${tagId++}

density

Atributo	density
Descrição	A propriedade 'density' permite definir a densidade do componente.
Tipo	"large" | "medium" | "small"
Valor padrão	DENSITY_MEDIUM

disabled

Atributo	disabled
Descrição	Tag deve estar desabilitado.
Tipo	boolean
Valor padrão	false

iconName

Atributo	icon-name
Descrição	A propriedade 'iconName' define o nome do ícone que será exibido ao lado do texto. O valor padrão é 'fa-solid:car', que corresponde a um ícone de carro da biblioteca Font Awesome.
Tipo	string
Valor padrão	''

interaction

Atributo	interaction
Descrição	Interação deve ser habilitada.
Tipo	boolean
Valor padrão	false

interactionSelect

Atributo	interaction-select
Descrição	Interação de seleção deve ser habilitada.
Tipo	boolean
Valor padrão	false

label

Atributo	label
Descrição	A propriedade 'label' é uma string que representa o texto a ser exibido no componente. Ela é refletida no DOM, permitindo que alterações no valor sejam refletidas no elemento HTML correspondente.
Tipo	string
Valor padrão	''

multiple

Atributo	multiple
Descrição	A tag permite seleção múltipla.
Tipo	boolean
Valor padrão	false

name

Atributo	name
Descrição	A propriedade 'name' é uma string que representa o nome do grupo da tag para seleção. Ela é refletida no DOM, permitindo que alterações no valor sejam refletidas no elemento HTML correspondente.
Tipo	string
Valor padrão	''

selected

Atributo	selected
Descrição	A tag está selecionada.
Tipo	boolean
Valor padrão	false

shape

Atributo	shape
Descrição	A propriedade 'shape' define o formato do componente.
Tipo	"circle" | "default" | "rounded"
Valor padrão	SHAPE_DEFAULT

status

Atributo	status
Descrição	Transforma a tag em um indicador de status, com aparência circular. É flexível podendo ser utilizado com label ou apenas a superfície circular (informação é transmitida por meio de cores).
Tipo	boolean
Valor padrão	false

Slots

Nome	Descrição
"default"	Slot para inserir o conteúdo da tag, como rótulo ou ícone

Eventos

Evento	Descrição	Propagação
radioSelected	Evento emitido quando a tag é selecionada.	true

Dependências

Usado por

• br-skiplink-item

Depende de

• br-icon
• br-button

Gráfico