componentes / exibição
Badge
Selo compacto pra mostrar status, contagem ou categoria.
453 B gzip roda no servidor · 0 JS
defaultnewdraftarchivedfailed
badge-default.tsx
import { Badge } from "@/components/ui/badge";
export default function BadgeDefault() {
return (
<div className="flex flex-wrap items-center justify-center gap-2">
<Badge>default</Badge>
<Badge variant="brand">new</Badge>
<Badge variant="outline">draft</Badge>
<Badge variant="muted">archived</Badge>
<Badge variant="destructive">failed</Badge>
</div>
);
}Instalação
$ npx shadcn@latest add https://cd-ui.vercel.app/r/badge.jsonprimeira vez? configure o components.json e o tema antes: veja instalação.
Uso
import { Badge } from "@/components/ui/badge"
<Badge variant="brand">new</Badge>API
Badge
Um <span> estilizado. Componente de servidor: não envia JS.
| prop | tipo | padrão |
|---|---|---|
variantEstilo visual. | "default" | "brand" | "outline" | "muted" | "destructive" | "default" |
classNameClasses extras, mescladas com | string | - |