BaseBadge

Mostra a situação de um item: em dia, atrasada, em análise.

Em diaAtençãoAtrasadaEm análiseRascunhoPequeno

Uso

• Um selo por item. O texto é curto e diz a situação, não a ação.
• O tom reforça o texto, nunca o substitui: "Atrasada" em vermelho, não só um ponto vermelho.
• Use os tons sempre com o mesmo significado no sistema inteiro.

Tom	Quando
success	Concluído ou em dia
warning	Precisa de atenção, mas não está errado
error	Atrasado, bloqueado ou com problema
info	Em andamento ou aguardando alguém
neutral	Sem situação definida, rascunho

Anatomia

1. Ponto: um círculo pequeno na cor do tom, decorativo.
2. Texto: o slot padrão, com a situação.
3. Fundo: a cor clara do tom escolhido em tone. O size muda a altura e o tamanho do texto.

Faça e não faça

Faça	Não faça
Escreva a situação: "Atrasada", "Em análise".	Escreva uma ação: "Aprovar", "Ver medição".
Use error só para atraso, bloqueio ou problema, em todas as telas.	Use error para "Rascunho" numa tela e para "Atrasada" em outra.
Ponha um selo por item, como a situação de cada contrato na lista.	Use selo para um atributo fixo, como a lei do contrato. Para isso, use BaseTag.

Estilo

Propriedade	Token
Fundo	--tj-support-*-subtle
Texto	--tj-support-*-text (contraste mínimo 4,5:1 sobre o fundo)
Raio	--tj-radius-pill
Altura	24 px (md), 20 px (sm)

Código

<BaseBadge tone="error">Atrasada</BaseBadge>

Propriedades

Propriedade	Tipo	Padrão	Descrição
tone	'neutral' | 'info' | 'success' | 'warning' | 'error'	'neutral'	Significado da situação; o texto também diz, a cor nunca é a única pista
size	'sm' | 'md'	'md'	Altura do selo

Acessibilidade

• Não há padrão do WAI-ARIA APG para selo. O selo é texto comum: o leitor de tela lê a situação.
• O ponto colorido é decorativo e não entra na leitura.
• Se o selo for atualizado enquanto a pessoa está na tela, avise com uma região aria-live na tela, não no selo.
• Testado com axe.
• Não recebe foco: o selo só informa, não há nada para operar pelo teclado.