Badge

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">Active</Badge>
<Badge variant="outline" color="red">Failing</Badge>
<Badge variant="default">v0.0.1</Badge>

Playground

<Component  color="brand"  variant="light"  size="sm">  Beta</Component>

Full prop browser

Variants

Five shape treatments — exactly the set Button uses. The default variant is light (badges are usually soft), not filled.

<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.

<Badge variant="light"  color="green">Active</Badge>
<Badge variant="light"  color="orange">Pending</Badge>
<Badge variant="filled" color="red">Failing</Badge>
<Badge variant="outline" color="gray">Draft</Badge>

Sizes

<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>
<Badge size="lg">Large</Badge>

API

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>