StatusBadge
Selo de estado com tom fixo e rótulo de uma ou duas palavras.
O StatusBadge diz em que pé algo está: conectado, pendente, com erro. O tom vem de um vocabulário fechado de seis estados, não de uma cor escolhida na hora, e o rótulo tem uma ou duas palavras. É o selo que o Admin usa nas Integrações, nos domínios e nas linhas de ação. Para uma categoria livre ou um rótulo sem estado, use Chip.
import { StatusBadge } from "@rastreio-x/ui";
Padrão
status escolhe o tom e label diz o estado em até duas palavras, em Title Case curto.
Estados
Seis estados cobrem o Admin. Cada um fixa cor, variante e ícone; nada se configura por selo.
| Estado | Quando usar | Tom |
|---|---|---|
ready | Pronto e funcionando: Conectada, Verificado. | Sucesso |
pending | Esperando algo acontecer: Pendente, Aguardando. | Cautela |
error | Falhou e pede ação: Falhou, DNS falhou. | Perigo |
warning | Funciona, mas pede atenção: Atenção, Expira em Breve. | Cautela |
neutral | Estado sem juízo: Rascunho, Variável (env). | Neutro |
soon | Ainda não disponível: Em Breve, Desligada. | Neutro, sem fundo |
Com ícone
Cor sozinha não carrega o significado. Com icon, os estados ready, pending, error e warning ganham o glifo; neutral e soon não têm ícone.
Origem e estado
O mesmo selo serve para dizer de onde vem um valor. Mantenha a regra de uma a duas palavras, com parênteses curtos quando preciso.
No Admin
No cabeçalho de um cartão, ao lado do nome da integração.
Em tabelas, uma coluna de estado vira uma lista escaneável.
Anatomia
StatusBadge (Chip do HeroUI, tamanho sm)
├── ícone opcional (icon), aria-hidden
└── rótulo Chip.Label, até 2 palavras
O selo é um Chip com data-status na raiz, o que dá um gancho estável para testes e para estilo futuro.
Propriedades
Outras props passam como data-testid para o Chip.
Animações
O StatusBadge não anima. O selo de movimento acima vem do arquivo action.tsx, que importa o StateBlock (esse arquivo carrega Motion), e não do selo. Troque o rótulo sem transição: o estado precisa aparecer na hora.
Acessibilidade
- O estado vira texto: o leitor de tela lê o rótulo, nunca depende da cor.
- Com
icon, o glifo levaaria-hidden, porque o rótulo já diz o estado. - Contraste vem dos tokens
success,warningedangerdo tema, nos dois temas. - Quando o estado muda sem interação (uma verificação terminou), anuncie a mudança numa região viva da tela.
Boas práticas
Faça
Evite
- Use o vocabulário: não crie um sétimo estado nem pinte o selo à mão.
- Quando o motivo importa, ofereça um
InfoHintao lado em vez de alongar o rótulo. - Um selo por objeto; vários selos na mesma linha disputam o olhar.
- Para categoria ou etiqueta sem estado, use
Chip.