Colors
All 10 color values
Lime
Pink
Violet
Yellow
Blue
Coral
Neon
Dark
White
Sizes & shapes
size sm / md · pill option
Small
Medium
Pill
Sm pill
Semantic usage
Common status + priority mappings
Active
Draft
Paused
Ended
High
Medium
New
Beta
Pro
Do / Don't
✓ Do
SLAB StudioActive
✕ Don't
Click me
Don't make badges interactive. Use Tag for toggleable chips.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| color | "lime"|"pink"|"violet"|"yellow"|"blue"|"coral"|"neon"|"dark"|"white" | "lime" | Fill color. Foreground is auto-selected for contrast. |
| size | "sm"|"md" | "md" | sm = 11px / 2×7px padding. md = 13px / 4×10px. |
| pill | boolean | false | Fully rounded pill shape. |
| children | ReactNode | — | Label text. Always rendered uppercase via CSS. |
Usage
import { Badge } from "components/core/Badge";
// Status
<Badge color="neon">Active</Badge>
<Badge color="yellow">Draft</Badge>
<Badge color="coral">High</Badge>
// Pill shape, small size
<Badge color="pink" pill size="sm">Beta</Badge>