Browse components
Badge
Compact status label in six variants with an optional live dot, pulse ring and a glinting shine sweep.
Installation
npx shadcn@latest add @glint-ui/badgeFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/badge.json
Usage
import { Badge } from "@/components/ui/badge";
<Badge variant="success" pulse>Operational</Badge>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | string | "Live" | Badge text. |
| variant | "default" | "secondary" | "outline" | "success" | "warning" | "destructive" | "default" | Color scheme. |
| size | "sm" | "md" | "md" | Height 20 or 24 px. |
| dot | boolean | false | Leading status dot. |
| pulse | boolean | false | Pulsing ring on the dot (implies dot). |
| shine | boolean | false | Periodic light sweep. |
| className | string | — | Extra classes for the root element. |