Badge
Small inline labels for status indicators, tags, and counts. Uses class-variance-authority for variant management.
Import
import { Badge } from "@phpcreation/frontend-components-react-nextjs-bundle/components/Badge";Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
variant | "default" | "secondary" | "destructive" | "outline" | "success" | "warning" | "info" | — | "default" | Color variant |
Plus all standard HTML <div> attributes.
Usage
Variants
<Badge variant="default">Active</Badge>
<Badge variant="success">Paid</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="destructive">Overdue</Badge>
<Badge variant="secondary">Draft</Badge>
<Badge variant="info">In Review</Badge>
<Badge variant="outline">Tag</Badge>Related
Last updated on