Badge
Selo que mostra um status, uma contagem ou uma categoria em uma ou duas palavras, ao lado de um título ou numa linha de tabela. É só texto; se a pessoa precisa clicar ou remover, use um Chip.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o que precisar. Ele renderiza no servidor.
import { Badge } from "@camaleo/react";Anatomia
Um <span> com o texto e, se você pedir, um pontinho antes dele. Cada parte tem um data-slot que você pode usar no CSS.
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.
Variantes
O fundo suave serve para o dia a dia. Guarde o preenchido para o badge que precisa chamar atenção na tela, e use o contorno quando houver muitos juntos.
Tons
Escolha o tom pelo sentido: cinza para neutro, azul para informação, verde quando deu certo, amarelo quando pede atenção em breve e vermelho quando algo falhou.
Ponto de status
O ponto ajuda a achar um estado ao vivo, como online ou em reunião, numa lista. Quem dá o sentido é a palavra ao lado.
Com ícone
O ícone ajuda a bater o olho, mas a palavra precisa dizer tudo. Marque o ícone com aria-hidden para ele não ser lido duas vezes.
Contagem com contexto
Quem ouve "Caixa de entrada 3" no leitor de tela não sabe 3 de quê. Coloque "não lidas" como texto escondido dentro do badge.
Texto longo
Nomes digitados pelas pessoas podem ficar compridos. Limite a largura e corte com reticências. O nome inteiro continua na página para o leitor de tela e no title para quem usa mouse.
| Pedido | Cliente | Status |
|---|---|---|
| #4092 | Ana Silva | Entregue |
| #4093 | Rafael Souza | Enviado |
| #4094 | Juliana Costa | Atrasado |
Numa tabela
Um badge por linha, numa coluna só dele, deixa a pessoa comparar os status de cima a baixo de relance.
Contagem nos filtros
Clique num filtro. O badge só mostra o número. Quem a pessoa aperta é o Toggle em volta, que também avisa se está ligado.
Em contexto
O badge fica ao lado do que ele descreve. São pedaços inteiros de interface para copiar, no estilo que você escolheu.
Beatriz Miranda
Líder de engenharia
Pedido #4092
Ana Silva
Seletor de data mostra o mês errado depois de mudar o fuso horário
Boas práticas
"Pagamento confirmado" fica claro para todo mundo, com ou sem a cor.
"Status 200" faz sentido para quem programou, não para o cliente que está lendo.
Um badge curto é lido num relance e cabe no celular.
Texto longo é cortado ou quebra o layout. Explicações vão no texto ou num Alert.
Props
O Badge renderiza um <span> e aceita os atributos dele, como className, style e title.
Styling hooks
Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio badge.
Atributos
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
Acessibilidade
- A cor nunca é o único sinal: o texto diz o status, e quem não enxerga a cor entende do mesmo jeito.
- Um número sozinho precisa de contexto. Coloque o que ele conta como texto escondido ("3 não lidas") ou diga no nome do controle em volta.
- Um badge que muda enquanto a pessoa está na página não é anunciado. Quando a mudança importa, avise numa mensagem de status (role="status").
- Para etiquetas que a pessoa seleciona ou remove, use o Chip: ele é um botão de verdade, com foco e nome.