Primitive
Badge
Displays a small status label, tag, or count indicator.
Default
Success
Warning
Destructive
Outline
Secondary
Gradient
Installation
npx benflux-ui add badgeUsage
import { Badge } from "@benflux-ui/react"
export default function Example() {
return <Badge variant="success">Active</Badge>
}Sizes
Small
Default
Large
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "success" | "warning" | "destructive" | "outline" | "secondary" | "gradient" | "glow" | "default" | Visual style of the badge |
| size | "sm" | "default" | "lg" | "default" | Size of the badge |