Small label component to highlight statuses, counts, or categories.
npx shadcn@latest add @preskok/badgeimport { Badge } from "@/components/ui/preskok-ui/badge"
export function BadgeDemo() {
return (
<div className="flex flex-wrap gap-2">
<Badge>Primary</Badge>
<Badge intent="secondary">Secondary</Badge>
<Badge intent="success">Success</Badge>
<Badge intent="warning">Warning</Badge>
<Badge intent="danger">Danger</Badge>
<Badge intent="outline">Outline</Badge>
</div>
)
}| Prop | Type | Default | Description |
|---|---|---|---|
intent | "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "outline" | "primary" | Visual style variant |
isCircle | boolean | true | Rounded vs. squared badge |
className | string | - | Additional CSS classes |