02Shipped
Badge
Compact metadata and state labels. Pill-shaped with tone variants.
Import
import { Badge, badgeVariants } from "@charply/design"Variants
All variants
DefaultSecondaryOutlineSuccessWarningDestructiveInfo
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "secondary" | "outline" | "ghost" | "success" | "warning" | "destructive" | "info" | "link" | "default" | Visual tone |
| asChild | boolean | false | Compose with custom element |
Guidelines
docs/design/components/badge.mdDo
- ✓Use `success` / `warning` / `destructive` for status-driven data.
- ✓Use `secondary` or `outline` for neutral category tags.
- ✓Keep badge text short (1–3 words).
Don't
- ✗Use badges as buttons — they have no interaction semantics. Use a small Button for clickable actions.
- ✗Use the primary variant for status. Reserve it for branding/feature labels.
See all variants and interactive states in Storybook. Run npm run storybook to open the workbench.