Badges
Rótulos inline para status, classificações e categorias. Renderiza como span — compatível com qualquer contexto de texto.
Semânticas INV
Variantes first-class para o domínio financeiro — status de operações, alertas e classificações.
PagoPendenteVencidoEm análise
| 1 | <Badge variant="success">Pago</Badge> |
| 2 | <Badge variant="warning">Pendente</Badge> |
| 3 | <Badge variant="error">Vencido</Badge> |
| 4 | <Badge variant="info">Em análise</Badge> |
Base shadcn
Variantes estruturais herdadas do shadcn/ui. Use para classificações neutras, tags e labels genéricos.
DefaultSecondaryOutlineDestructive
| 1 | <Badge variant="default">Default</Badge> |
| 2 | <Badge variant="secondary">Secondary</Badge> |
| 3 | <Badge variant="outline">Outline</Badge> |
| 4 | <Badge variant="destructive">Destructive</Badge> |
Uso em contexto
Badge como elemento inline — dentro de texto, células de tabela e headers.
Operação Executada em 21 jan 2026 às 14h32.
Fatura INV-004 está Vencida há 12 dias.
Ordem de compra Pendente de aprovação do gestor.
Ativo PETR4 Em análise pelo comitê de risco.
| Fatura | Cliente | Status |
|---|---|---|
| INV-001 | Fundo Alpha | Pago |
| INV-002 | Gestora Beta | Pendente |
| INV-003 | Holdings Gamma | Vencido |
| 1 | // inline em texto |
| 2 | <p> |
| 3 | Operação <Badge variant="success">Executada</Badge> em 21 jan 2026. |
| 4 | </p> |
| 5 | |
| 6 | // em célula de tabela |
| 7 | <TableCell> |
| 8 | <Badge variant={status}>Pago</Badge> |
| 9 | </TableCell> |
Uso
| 1 | import { Badge } from "@/components/ui/badge" |
| 1 | // Variantes INV (financeiro) |
| 2 | <Badge variant="success">Pago</Badge> |
| 3 | <Badge variant="warning">Pendente</Badge> |
| 4 | <Badge variant="error">Vencido</Badge> |
| 5 | <Badge variant="info">Em análise</Badge> |
| 6 | |
| 7 | // Variantes base |
| 8 | <Badge variant="default">Default</Badge> |
| 9 | <Badge variant="secondary">Secondary</Badge> |
| 10 | <Badge variant="outline">Outline</Badge> |
| 11 | <Badge variant="destructive">Destructive</Badge> |