Badge

Badge is a display <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. It composes onto a real control with asChild when a badge needs to be clickable.

import { Badge } from '@42-central/ui-react/badge';

<Badge color="green">Validated</Badge>
<Badge variant="outline" color="red">Failed</Badge>
<Badge variant="gradient">Pro</Badge>

Playground

<Component variant="light" size="md">
  In progress
</Component>

Full prop browser

Variants

Five shape treatments. Four of them — filled, light, outline, subtle — are the set Button uses; gradient is Badge's own. 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="gradient">Gradient</Badge>

gradient is palette-independent — it ignores color and paints its own linear gradient, which you steer with the gradient prop:

<Badge variant="gradient" gradient={{ from: 'cyan', to: 'blue', dir: 'to-br' }}>Pro</Badge>

Colors

Any color in the palette pairs with any variant (except gradient). Use it for status semantics: green for success, red for failure, orange for in-progress.

<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="neutral">Queued</Badge>

Sizes

<Badge size="xs">Extra small</Badge>
<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>
<Badge size="lg">Large</Badge>
<Badge size="xl">Extra large</Badge>

API

All other props are forwarded to the underlying <span> (or asChild element).

Accessibility

Badge renders a <span>: nothing to focus, nothing to click. If you need an interactive badge (a tag filter, a count that reveals its detail), use asChild with a real <button> so the semantics line up — the kit's focus ring comes with it, so you supply no className for it:

<Badge asChild color="brand">
  <button type="button" onClick={...}>Remove tag</button>
</Badge>

As a hover-card trigger

asChild on both sides collapses HoverCard.Trigger and Badge into a single element that is the badge — one DOM node, keyboard-reachable, with the ring hugging the badge's own radius. This is the idiomatic way to show a compact value that reveals its detail on hover or focus, e.g. a count standing in for a list too long to render inline:

<HoverCard.Root>
  <HoverCard.Trigger asChild>
    <Badge asChild variant="light" aria-label="12 campuses">
      <button type="button">12</button>
    </Badge>
  </HoverCard.Trigger>
  <HoverCard.Content>{/* the full list */}</HoverCard.Content>
</HoverCard.Root>

Give the button an aria-label when the visible text is a bare number — "12" alone doesn't say what it counts.

Changelog