Componentes

21. Badge

estávelseed-componentes.md v1.43 · §21seção 23 de 9821-badge-estavel-validado-pelo-rafael-em-2026-08.md · MD5 17d3ab0e

Título completo no canon: 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#

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

BancadaSEED DS v2 — Preview Bloco 3 completo — v0.23c (CP-P4)abrir em página própria ↗

Também cita o §21: banco-cn, banco-navegacao.