Badge
Rótulo curto e estático: status, contagem, categoria.
Playground
Novo
Variante
<Badge>Novo</Badge>
Quando usar
- ✓Marcar status ou categoria de um item
- ✓Mostrar uma contagem ao lado de um título
Evite quando
- É clicável e faz uma ação→ Button size xs ou sm
- Precisa explicar um estado com ícone e texto longo→ um bloco com text-{status} + bg-{status}-subtle + border-{status}-border (padrão do ConfidenceBadge)
Variantes e props
variantpadrão: defaultdefaultsecondarydestructiveoutlineghostlink
secondary para contagens e metadados; destructive para erro.
renderBase UI useRender: pode virar <a> mantendo o estilo.
Estados
estático (sem hover por padrão)
Acompanha data-density="compact" (tamanhos vêm de --spacing, --text-*, --radius).
Acessibilidade
- Papel
- nenhum (texto)
- Teclado
- não focável
- Não dependa só da cor: o texto do badge precisa dizer o status
Código
import
import { Badge } from "@/components/ui/badge";Fonte: src/components/ui/badge.tsx · Resense (shadcn base-nova, Base UI)
Relacionados: Button