Carregando…Carregando…Carregando…Carregando…Inline label with 4 variants, 3 sizes, 7 intents, dot indicator and dismiss.
$ npx kikitocn add badge@/lib/utils@/lib/motionmotionimport { Badge } from "@/components/ui/cn/badge/Badge";
export function BadgeExample() {
return (
<div className="flex flex-wrap gap-2">
<Badge intent="primary">Novo</Badge>
<Badge intent="success" variant="soft">Ativo</Badge>
<Badge intent="danger" variant="outline">Erro</Badge>
<Badge intent="warning" dot>Em revisão</Badge>
<Badge intent="success" animated>Online</Badge>
</div>
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
variant | 'solid' | 'outline' | 'soft' | 'ghost' | 'dot' | 'solid' | Estilo visual do badge |
intent | 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'neutral' | 'primary' | Intenção semântica (define cor do badge) |
size | 'sm' | 'md' | 'lg' | 'md' | Tamanho do badge |
rounded | 'none' | 'sm' | 'md' | 'lg' | 'full' | undefined | Override do border-radius |
dot | boolean | false | Exibe um ponto indicador colorido à esquerda |
dismissible | boolean | false | Adiciona botão × para remover o badge |
iconLeft | ReactNode | undefined | Ícone exibido à esquerda do texto |
iconRight | ReactNode | undefined | Ícone exibido à direita do texto |
onDismiss | () => void | undefined | Callback chamado ao clicar no botão de dismiss |
animated | boolean | false | Status assíncrono: glow ambiente pulsante + ícone com pop-in (spring) + rótulo revelado letra-por-letra (children precisa ser string pro stagger). Origem: badge-07/08/09.tsx do shadcndashboard. |
Solid (default)
Outline
Soft
Dot
SM · MD · LG
Radius options
Click × to dismiss
animated — glow ambiente + ícone pop-in + rótulo letra-por-letra
color × rounded=lg
border × rounded=full
Clerk Badge — moldura tracejada nos 4 lados
Modern Simple Badges — fundo tintado translúcido por cor