Componentes
21. Badge
seed-componentes.md v2.00 · §21seção 43 de 18421-badge-estavel-validado-pelo-rafael-em-2026-08.md · MD5 4878559bTítulo completo no canon: Badge — estável · validado pelo Rafael em 2026-08-04 (preview v0.19; suite C)
Em uma frase: Badge NÃO é interativo — contagem ou status; se clica, é chip (§22). O critério de um segundo separa os dois.
Vocabulário desta seção: lozenge
(decisão registrada — ver Histórico da seção)
21.1 A separação tripla (decisão-mãe do sub-bloco C)#
Badge = NÃO-interativo (nunca clique, cursor pointer ou navegação), dois papéis: numérico (contadores) e de status (o "lozenge"). Chip (§22) = interativo. Critério de 1 segundo: se clica, é chip; se só informa, é badge. Vocabulário: anglicismos badge/chip mantidos (correntes no stack shadcn/Lovable e no time); "tag" do gov.br registrado como sinônimo de chip. Descartado: badge clicável (híbrido que confunde e falha teclado — Polaris: badge exibe informação, nunca ações).
21.2 Decisões V1–V6#
| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| V1 | Sempre estático; interação = chip ou botão | Polaris; Smart Patterns | Badge clicável |
| V2 | Variantes: numérico (inteiros; trunca "99+"; dot sem número para novidade não-contada) e status (severidades T1–T5 + tom NEUTRO cinza para estados sem carga: "Rascunho", "Arquivado") | Atlassian (só inteiros); Carbon (badge sem número quando a contagem não importa); Polaris (tons + neutro) | Badge genérico sem papéis |
| V3 | Texto: 1 palavra (2 para estado composto: "Parcialmente pago"), PASSADO para desfechos; vocabulário de status FECHADO por domínio — variação nova só se nenhuma existente serve | Polaris (uma palavra; passado; não criar alternativas) + T5-b (WCAG 3.2.4) | Status criativo por tela |
| V4 | A11y: significado por cor/ícone → texto visually-hidden contextual; numérico expõe rótulo completo ("3 notificações não lidas") | Polaris (texto oculto lido por AT dá o significado em contexto) | Badge mudo para AT |
| V5 | Consolidação de múltiplos status = severidade de MAIOR atenção (erro > atenção > informação > sucesso — ordem do P1) | Carbon status pattern (verde+amarelo+vermelho por baixo → consolidado vermelho) | Consolidar pela maioria |
| V6 | 3 sinais: cor + texto sempre; ícone recomendado, OBRIGATÓRIO em atenção e erro; pares de contraste HERDAM os do alerta (T1, medidos) | §1.5.1; T3 | Severidade só por matiz |
21.3 Anatomia e tokens#
Status: pílula radius 999, fundo -bg, texto -text (pares T1/errata azul-800), ícone 14px opcional, altura 22px, padding 2/10, peso 600, font-size 12px; neutro = cinza-100/cinza-700 (light) · #38464F/cinza-200 (dark). Numérico: círculo/pílula em --seed-feedback-danger-solid com texto branco quando é contador de pendência, ou neutro para tally sem urgência; JetBrains Mono no número. Dot: 8px, mesma cor semântica do que sinaliza.
21.4 Os 7 testes#
- Pares herdados (medidos) + numérico ve-500/branco 4.30 ≥3:1 para não-textual e texto 12px bold medido no preview. 2. Cor+texto(+ícone). 3. Grayscale: texto e ícone carregam. 4. Badge × chip a 1s (sem borda/cursor × com). 5. Vocabulário fechado (V3). 6. Sempre visível sem interação (é a natureza dele). 7. 360px: pílula não trunca o rótulo; dot legível ao lado de ícone de nav. (Verificado: suite v0.19, aprovado.)
Também cita o §21: banco-cn, banco-navegacao, tela-quadro, tela-quadro-funil, tela-shell-abas.