Badge
Compact status labels in solid, soft and outline styles.
Install
npx shadcn add @clearly/badgePreview
DefaultSecondaryOutlineDestructive
Usage
import { Badge } from "@/components/ui/badge"
<Badge />Every Clearly component also accepts glass (subtle·medium·strong), specular and className.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "outline" | "destructive" | "ghost" | "link" | "default" | Visual style. |
asChild | boolean | false | Merge props onto the child element. |