ComponentServer-safe
Badge
Displays a compact label for status, metadata or categories.
Installation
Preview
NewIn progress ReadyDraft
Usage
tsx
import { Badge } from "@/components/ui/badge"
export function BadgeDemo() {
return <Badge variant="success">Ready</Badge>
}API reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "outline" | "destructive" | "success" | "default" | Controls color and emphasis. |
asChild | boolean | false | Renders the child while preserving badge styling. |
className | string | — | Overrides or extends the generated classes. |