Display
Badge
Compact status and category labels with status dots and a mono style.
Badges label status, category or version at a glance. Cuelark badges come in soft tinted tones, an optional status dot with a live pulse, and a mono uppercase style for version tags and metadata.
Preview
NeutralPrimarySuccessWarningDestructiveOutlineSolid
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/badge.jsonThe CLI also installs the Cuelark theme tokens. With the @cuelark namespace configured, use @cuelark/badge.
Usage
import { Badge } from "@/components/ui/badge";
<Badge variant="success" dot="pulse">Live</Badge>Examples
Status and mono
Status dots, a live pulse, mono tags and a badge link.
LiveDegradedOfflineDraft
API reference
Badge
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "neutral" | "primary" | "success" | "warning" | "destructive" | "outline" | "solid" | "neutral" | Color tone. |
| size | "sm" | "md" | "md" | Height and text size. |
| dot | boolean | "pulse" | false | Leading status dot; pulse adds a ping. |
| mono | boolean | false | Mono, uppercase, tracked text. |
| asChild | boolean | false | Render the child element (e.g. a link) with badge styles. |
Accessibility
- The status dot is decorative (aria-hidden); the text carries the meaning.
- The pulse animation is hidden for users who prefer reduced motion.
- Badge links get a visible focus outline.
FAQ
Also searched as: react badge · shadcn badge · status badge · tag component · tailwind badge