Component

Badge

A status badge with 7 variants and 2 sizes. Semantic variants automatically get a role="status" for accessibility.

Variants

Seven visual variants for different semantic meanings.

Default

default

Primary

primary

Secondary

secondary

Destructive

destructive

Outline

outline

Success

success

Warning

warning

Accent & status roles

tertiary is a second brand accent; positive, caution, and done are themeable status roles added in issue #485.

Tertiary

tertiary

Positive

positive

Caution

caution

Done

done

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import { Badge } from '@refraction-ui/react'

export function StatusIndicators() {
  return (
    <div className="flex gap-2">
      <Badge variant="success">Active</Badge>
      <Badge variant="warning">Pending</Badge>
      <Badge variant="destructive">Error</Badge>
      <Badge variant="outline">Draft</Badge>
    </div>
  )
}

// Linked badge: <Badge asChild><a href="/status">…</a></Badge>

Sizes

Two sizes: small for inline use, medium (default) for standalone.

Small

Medium

md (default)

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'primary' \| 'secondary' \| 'destructive' \| 'outline' \| 'success' \| 'warning' \| 'tertiary' \| 'positive' \| 'caution' \| 'done'`	`'default'`	Visual style of the badge. `tertiary`, `positive`, `caution`, and `done` were added in issue #485.
`size`	`'sm' \| 'md'`	`'md'`	Size of the badge.
`className`	`string`	--	Additional CSS classes to apply.
`asChild`	`boolean`	`false`	Render as child element (e.g. wrap an <a> tag for a linked badge).