Badge
A small status indicator with multiple style variants. Used for tags, statuses, and categorization.
Variants
Default
Secondary
Error
Outline
Next to a heading
API Keys
Beta
Count indicator
Installation
pnpm
pnpm dlx @hex-core/cli add badgeAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "destructive" | "outline" | default | Visual style |
className | string | — | Additional CSS classes |
AI Guidance
When to use
Use for status indicators, tags, counts, categories. Place next to headings, in lists, or in table cells.
When not to use
Don't use for interactive actions (use Button). Don't use for long text content.
Common mistakes
- Using destructive variant for non-error states
- Badge text too long
Accessibility
Purely decorative by default. Add role='status' for dynamic status badges.
Token budget: 200