Badge
A small status descriptor with 12 color variants, 3 sizes, optional pulsing dot indicator, and pill shape.
Import
import { Badge } from "@igorao79/uivix";Playground
Badge Label
All Variants
defaultsecondaryoutlinesuccesswarningdestructiveglowgradientglassneonshimmersoftinfopremiumnewbeta
With Dot
ActivePendingErrorLive
Usage
<Badge variant="success" dot>Active</Badge>
<Badge variant="warning" size="lg">Pending</Badge>
<Badge variant="glow">Featured</Badge>
<Badge variant="gradient" pill>Premium</Badge>
<Badge variant="neon">Neon</Badge>
<Badge variant="shimmer">Shimmer</Badge>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "secondary" | "outline" | "success" | "warning" | "destructive" | "glow" | "gradient" | "glass" | "neon" | "shimmer" | "soft" | "default" | Color variant of the badge |
| size | "sm" | "md" | "lg" | "md" | Size of the badge |
| pill | boolean | false | Use fully rounded pill shape |
| dot | boolean | false | Show a pulsing dot indicator |
| dotColor | string | - | Custom CSS color for the dot |
| className | string | - | Additional CSS classes |