Badge
Compact inline label. Five variants × eleven colors, sharing Button's accent system but tuned for status chips and counters.
Badge is a non-interactive <span> styled with the kit's (variant × color) system. The shape and palette axes mirror Button, so a chip and an action share the same accent language.
import { Badge } from '@42/ui-react/badge';
<Badge color="green">Validated</Badge>
<Badge variant="outline" color="red">Failed</Badge>
<Badge variant="default">v0.0.1</Badge>Playground
Component
Dir
Presets
Props
Code
<Component variant="light" color="brand" size="md"> In progress</Component>Full prop browser
Variants
Five shape treatments — exactly the set Button uses. The default variant is light (badges are usually soft), not filled.
Code
<Badge variant="filled">Filled</Badge><Badge variant="light">Light</Badge><Badge variant="outline">Outline</Badge><Badge variant="subtle">Subtle</Badge><Badge variant="default">Default</Badge>default is palette-independent — color is ignored for fill/text on this variant.
Colors
Any color in the palette pairs with any variant (except default). Use it for status semantics: green for success, red for failure, orange for in-progress.
Code
<Badge variant="light" color="green">Validated</Badge><Badge variant="light" color="orange">Pending</Badge><Badge variant="filled" color="red">Failed</Badge><Badge variant="outline" color="gray">Queued</Badge>Sizes
Code
<Badge size="sm">Small</Badge><Badge size="md">Medium</Badge><Badge size="lg">Large</Badge>API
Prop
Type
All other props are forwarded to the underlying <span> (or asChild element).
Accessibility
Badge is non-interactive by default — no focus ring, no hover treatment. If you need a clickable badge (a tag filter, a removable chip), reach for asChild with a real <button> so semantics line up:
<Badge asChild color="brand">
<button type="button" onClick={...}>Remove tag</button>
</Badge>