Badge
Status indicators and labels. Non-interactive — for displaying state, never for triggering actions.
Badge displays contextual status. It uses semantic system colors to communicate state at a glance, with solid (saturated) and subtle (pastel) appearances for different surface contexts.
Badge
Use when: Read-only status with a value judgment (good/bad/waiting). Published, Active, Failed.
Don't: Wire onClick — Badge is an indicator, not an action.
<Badge status="positive">Done</Badge>Tag
Use when: Neutral categorization without a value judgment. Industry, segment, owner, size.
Don't: Use for status — that's Badge.
<Tag>Cosmetic</Tag>Chip
Use when: Interactive pill — filter selections, removable tokens, multi-select.
Don't: Render with no handler — that's Badge or Tag.
<Chip label="Active" onRemove={...} />Use it for
- A record's status (Published, Draft, In Review, Archived)
- Pipeline state (Pending, Processing, Completed, Failed)
- Categorical states with a value judgment (Healthy/Warning/Critical)
For neutral categorization without a status meaning, use Tag. For interactive pills, use Chip.
Import
import { Badge } from '@brikdesigns/bds';Variants
Six status colors across four sizes, each available in solid and subtle appearances.
Status colors
Subtle appearance
Lower-emphasis pastel fill. Use inline with content, in table cells, on cards — anywhere solid would over-emphasize.
Sizes
Four sizes — xs is icon-only (no text), sm md lg carry text.
With icon
Pass icon for a leading visual. Required when size="xs" (icon-only).
<Badge status="positive" icon={<CheckIcon />}>Done</Badge>
<Badge size="xs" status="error" icon={<XCircleIcon />} />When not to use
Badge is read-only. Never wire onClick, never wrap in a <Link>, never trigger behavior. Reading "Active" is different from clicking "Active to filter" — the latter is a Chip.
- Don't pick
brandfor routine status. It draws the eye like a CTA. Reserve for genuinely-featured states. - Don't mix
solidandsubtleappearances in the same cluster. Pick one per row for visual coherence.
Accessibility
- Renders a
<span>— non-interactive by default. - The text content is the accessible name. For icon-only (
xs), passaria-label. - Status is communicated via color and text — never color alone.
API
| Prop | Type | Default |
|---|---|---|
status | 'positive' | 'warning' | 'error' | 'info' | 'progress' | 'brand' | — |
size | 'xs' | 'sm' | 'md' | 'lg' | 'md' |
appearance | 'solid' | 'subtle' | 'solid' |
icon | ReactNode | — |
children | ReactNode | — |
Tokens
--color-system-green/--color-system-green-light— Positive--color-system-red/--color-system-red-light— Error--color-system-yellow/--color-system-yellow-light— Warning--color-system-blue/--color-system-blue-light— Progress--color-system-neutral/--color-system-neutral-light— Info
Related
- Tag — neutral categorization sibling
- Chip — interactive sibling
- BadgeGroup — multi-badge cluster
- Dot — minimal status indicator
- Storybook playground