Carregando…Carregando…Carregando…Carregando…Inline label with 4 variants, 3 sizes, 7 intents, dot indicator, dismiss and status/ping/tag modes.
Demo coming soon
Add a demo component to DEMOS in _showcase.tsx for display/tag
Demo coming soon
Add a demo component to DEMOS in _showcase.tsx for display/ping
$ npx kikitocn add badge@/lib/utilsimport { 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>
</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 |
Solid (default)
Outline
Soft
Dot
SM · MD · LG
Radius options
Click × to dismiss
Status Badge — colored presence dot with optional pulse and label