Badge
Inline label component for displaying status, categories, counts, and other supplementary information — combining 6 semantic colors and 3 variants for diverse contexts.
3
Variants
3
Sizes
6
Colors
Pure
React
Playground
Preview
D24px
Badge
Variant
Color
Size
Radius
Options
<Badge>Badge</Badge>Variants
Solid
Subtle
Outline
<Badge variant="solid">Solid</Badge>
<Badge variant="subtle">Subtle</Badge>
<Badge variant="outline">Outline</Badge>Colors
Freely combine 6 semantic colors with 3 variants.
solid
defaultprimarysuccesswarningerrorinfo
subtle
defaultprimarysuccesswarningerrorinfo
outline
defaultprimarysuccesswarningerrorinfo
Sizes
smHeight20px
Font11px
Padding X6px
Min Width20px
defaultHeight24px
Font12px
Padding X8px
Min Width24px
lgHeight28px
Font13px
Padding X10px
Min Width28px
| Size | Height / Min Width | Font | Padding X | Text | Count |
|---|---|---|---|---|---|
sm | 20px | 11px | 6px | Badge | 3 |
default | 24px | 12px | 8px | Badge | 3 |
lg | 28px | 13px | 10px | Badge | 3 |
Features
Status Dot
ActivePendingError
<Badge dot color="success">Active</Badge>
<Badge dot color="warning">Pending</Badge>
<Badge dot color="error">Error</Badge>Icon
FeaturedNewInfo
<Badge icon={<Star />} color="warning" variant="solid">Featured</Badge>
<Badge icon={<Zap />} color="primary" variant="solid">New</Badge>
<Badge icon={<Info />} color="info">Info</Badge>Counter
31299+5
<Badge color="error" variant="solid">3</Badge>
<Badge color="error" variant="solid">12</Badge>
<Badge color="error" variant="solid">99+</Badge>
<Badge color="primary" variant="solid" size="sm">5</Badge>Removable
RemovableTag
<Badge removable onRemove={handleRemove}>Removable</Badge>
<Badge removable onRemove={handleRemove} color="primary" variant="solid">Tag</Badge>API
Props
variant"subtle""solid" | "subtle" | "outline"Visual style of the badge
color"default""default" | "primary" | "success" | "warning" | "error" | "info"Semantic color
size"default""sm" | "default" | "lg"Size (20/24/28px)
radius"full""sm" | "base" | "md" | "lg" | "full"Corner radius (2/4/6/8/∞px)
iconundefinedReact.ReactNodeIcon displayed at the start
dotfalsebooleanShow status dot
removablefalsebooleanShow remove button
onRemoveundefined() => voidClick callback for the remove button
asChildfalsebooleanRender as child element using Slot pattern
| Name | Type | Default | Description |
|---|---|---|---|
variant | "solid" | "subtle" | "outline" | "subtle" | Visual style of the badge |
color | "default" | "primary" | "success" | "warning" | "error" | "info" | "default" | Semantic color |
size | "sm" | "default" | "lg" | "default" | Size (20/24/28px) |
radius | "sm" | "base" | "md" | "lg" | "full" | "full" | Corner radius (2/4/6/8/∞px) |
icon | React.ReactNode | undefined | Icon displayed at the start |
dot | boolean | false | Show status dot |
removable | boolean | false | Show remove button |
onRemove | () => void | undefined | Click callback for the remove button |
asChild | boolean | false | Render as child element using Slot pattern |
Anatomy
1
2
3
4
Featured5
Height
24pxPadding X
8pxgap
4px1
Container
Pill-shaped container
2
Dot
Dot (optional)
3
Icon
Icon (optional)
4
Label
Text label
5
Remove
Remove button (optional)
Best Practices
✓
Do
- ✓Use short text (1–2 words)
- ✓Use meaningful colors consistently
- ✓Use the dot prop for status indicators
- ✓Set onRemove for removable badges
✕
Don't
- ✗Don't put long sentences in a badge
- ✗Don't overuse multiple colors on the same screen
- ✗Don't use badges as interactive elements
- ✗Don't use badges for decorative purposes only
Accessibility
Keyboard
TabFocus the remove button (when removable)
EnterRemove the badge (when removable)
ARIA / WCAG
- Remove button has
aria-label="Remove" - Icons and dots have
aria-hidden="true" - Color contrast meets WCAG AA
- Focus ring visible on remove button