BaseTag

Mostra um atributo fixo do registro: a lei, o tipo de obra, a vigência. Para a situação do item, use o BaseBadge.

CF001/2022Reforma · limite 50%Lei 14.133Vigência até 12/2026

Uso

• Uma etiqueta é um atributo, não uma situação: ela não tem cor de situação. "Em atraso" é selo, "Lei 14.133" é etiqueta.
• Várias etiquetas podem ficar juntas, lado a lado, no cabeçalho de um registro ou numa linha de tabela.
• O texto é curto, de uma a três palavras. Um texto que não cabe é cortado com reticências; o texto inteiro continua para o leitor de tela e aparece como dica ao passar o mouse.
• O ícone é opcional e só ilustra: o texto sozinho tem de dizer o que é.

Removível

Use dismissible em filtros aplicados e escolhas que a pessoa pode desfazer. O botão emite dismiss, e a tela tira a etiqueta da lista e leva o foco para a etiqueta seguinte com focus(). Quando não sobra nenhuma, o foco vai para o botão que restaura os filtros.

ReformaLei 14.133Vigência 2026

Estados

PadrãoRemovívelDesabilitada

Ao passar o mouse sobre o botão de remover, o fundo muda; com o teclado, o foco mostra o anel. Com disabled, o botão de remover fica desabilitado e a etiqueta fica esmaecida, com borda tracejada.

Estilo

Propriedade	Token
Fundo	--tj-layer-01; desabilitada --tj-field-disabled
Borda	--tj-border-subtle-02 (1 px); desabilitada tracejada, --tj-border-strong-01
Texto	--tj-text-secondary; desabilitada --tj-text-placeholder
Ícone	--tj-icon-secondary; desabilitada --tj-text-placeholder
Botão de remover	hover --tj-layer-accent-01, pressionado --tj-layer-accent-02, ícone --tj-icon-primary
Foco	contorno de 2 px --tj-border-interactive com --tj-ring
Raio	--tj-radius-sm, para não ser confundida com o selo, que é pílula
Altura	24 px, a mesma do selo; o botão de remover tem 20 × 20 px e área de toque de 24 × 24 px
Fonte	--tj-text-xs, peso --tj-weight-medium

Código

<script setup lang="ts">
import { nextTick, ref } from 'vue'

const filters = ref(['Reforma', 'Lei 14.133'])
const tags = new Map<string, { focus: () => void }>()
const restore = ref<{ $el: HTMLElement } | null>(null)

async function remove(filter: string) {
  const index = filters.value.indexOf(filter)
  filters.value = filters.value.filter((item) => item !== filter)
  await nextTick()
  const next = filters.value[Math.min(index, filters.value.length - 1)]
  if (next) tags.get(next)?.focus()
  else restore.value?.$el.focus()
}
</script>

<template>
  <BaseTag label="Lei 14.133" icon="journal-text" />
  <BaseTag
    v-for="filter in filters"
    :key="filter"
    :ref="(tag) => tag ? tags.set(filter, tag) : tags.delete(filter)"
    :label="filter"
    dismissible
    @dismiss="remove(filter)"
  />
  <BaseButton ref="restore" kind="ghost" size="sm">Restaurar filtros</BaseButton>
</template>

Propriedade	Tipo	Padrão	Descrição
label	string	—	Texto da etiqueta. Obrigatório; também dá nome ao botão de remover
icon	string	—	Nome do ícone do Bootstrap Icons, sem bi-, mostrado antes do texto
dismissible	boolean	false	Mostra o botão de remover
disabled	boolean	false	Esmaece a etiqueta e desabilita o botão de remover

Evento: dismiss (MouseEvent), ao clicar no botão de remover ou acioná-lo com Enter ou Espaço.

Método: focus(), que leva o foco ao botão de remover. Use depois de remover uma etiqueta vizinha.

Acessibilidade

• A etiqueta é texto comum: o leitor de tela lê o atributo. O ícone é decorativo e fica escondido.
• O botão de remover segue o padrão de botão do WAI-ARIA: é um <button> nativo, entra na ordem do Tab e é acionado com Enter e Espaço.
• O nome do botão é "Remover" mais o texto da etiqueta, como "Remover Lei 14.133", para cada botão ser único na lista. O mesmo texto aparece como dica do mouse.
• Ao remover, o botão some junto com a etiqueta. A tela deve levar o foco para a próxima etiqueta com focus(), ou para o controle dos filtros quando não sobrar nenhuma, para o foco não cair no início da página. O exemplo "Removível" faz isso.
• O botão de remover tem 20 × 20 px, mas a área de toque chega a 24 × 24 px (WCAG 2.5.8), qualquer que seja o espaço entre as etiquetas.
• O foco aparece com contorno de 2 px e anel; no modo de alto contraste do Windows, o contorno usa a cor de destaque do sistema.
• A etiqueta desabilitada não depende só da cor: na tela, ganha borda tracejada além do texto esmaecido; para a tecnologia assistiva, o botão fica desabilitado de verdade.
• A transição do hover é desligada com prefers-reduced-motion.
• Testado com axe em todos os estados.