---
fonte: 01-canonicos/seed-componentes.md
versao_da_fonte: v1.43
secao: 21
titulo: "Badge — `estável` · validado pelo Rafael em 2026-08-04 (preview v0.19; suite C)"
sequencia: 23 de 98
bytes_do_corpo: 3605
md5_do_corpo: 17d3ab0e4730eed9c7a38004b3ae74d9
gerado_por: 06-validacao/geradores/gen-camada-ia.py
nota: fatia GERADA — o corpo abaixo é byte a byte o trecho do canônico; edite o canônico, nunca esta fatia. Canônico inteiro em https://ds.seed.eng.br/01-canonicos/seed-componentes.md
---
## 21. Badge — `estável` · validado pelo Rafael em 2026-08-04 (preview v0.19; suite C)

> **Base (3 rodadas, 2026-08-04):** R1 — Atlassian (badge = SÓ inteiros; status = lozenge; rótulo = tag — a separação tripla), Carbon (badge indicator com/sem número; status indicator pattern: consolidação pela maior atenção), Polaris badge (tons; passado; texto visually-hidden; vocabulário fechado), Smart Patterns (badge sempre estático). R2 — shadcn/stack (herança). R3 — WCAG 1.4.1/3.2.4 via T5-b; gov.br (tag como sinônimo registrado).

### 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

1. 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.)*

---