Badge

Quando usar

Use o badge para marcar o estado de um item numa lista, tabela ou cartao: uma ordem pendente, uma posicao ativa, uma conta arquivada. Ele e um rotulo, nao um botao: nao dispara acao e nao deve ser clicavel.

Prefira o badge quando o valor e curto (uma ou duas palavras) e quando existe um numero limitado de estados possiveis. Para contagens livres ou texto mais longo, use outro padrao de UI (por exemplo um rotulo simples ou uma celula de tabela).

Quando nao usar

Nao use badge como botao de filtro removivel, nem como indicador de progresso continuo. Nao empilhe mais de um badge por linha de dado quando o objetivo e leitura rapida: dois ou tres no maximo, senao a lista vira ruido visual.

Anatomia

• Raiz (data-slot="badge"): o container com borda, fundo e texto da variante.
• Ponto indicador (data-slot="badge-dot", opcional): um circulo preenchido com a cor do texto, usado antes do rotulo para reforcar visualmente um estado como online/offline.

Variantes

• neutral (padrao): estado sem carga semantica, uso geral.
• brand: destaque de marca, categoria ou plano.
• success: estado positivo (ativo, aprovado, concluido).
• warning: estado que pede atencao (pendente, expirando).
• archived: estado inativo ou fora de operacao.

Tamanhos

• default: altura fixa de 16px, para uso dentro de linhas de tabela e listas densas.
• lg: altura livre, texto maior, para uso em cartoes e cabecalhos onde o badge e mais um destaque do que uma marcacao densa.

Acessibilidade

O badge e um <span> sem papel interativo: nao recebe foco e nao deve envolver um controle. Quando o ponto indicador esta presente, ele carrega aria-hidden="true", porque a informacao de estado precisa estar no texto do badge, nunca só na cor ou só no ponto. Cor sozinha nunca e a unica pista de significado.