Badge
Indicador visual para status, categorias e contagens. Usa tokens semânticos (success / warning / destructive / info).
Variantes
default / secondary / outline
DefaultSecondaryOutline
Status semânticos
Cada status combina bg-*-background, text-*-text e border-*-border.
success / warning / destructive / info
AtivoPendenteInativoEm análise
Com dot
Indicador de status com bolinha sólida
AtivoPendenteInativoEm análise
Com ícone
AprovadoAguardandoAtrasadoRevisão
Contador
Usado em notificações e agrupamentos
31299+
Removível (chip)
São PauloResidencialEm negociação
Uso em tabela
| Nome | Status | Tipo |
|---|---|---|
| Edifício Aurora | Ativo | Residencial |
| Torre Estrela | Pendente | Comercial |
| Bloco Sol | Inativo | Misto |
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| variant | default | secondary | danger | success | warning | destructive | info | outline | ghost | link | default | Estilo de base, incluindo semântica Niemeyer (success, warning, destructive, info) e o danger sutil (estilo shadcn) |
| className | string | — | Classes extras |
Composição, exemplos e tabelas completas (shadcn + Radix): shadcn/ui — Badge (Radix)