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

Installation

$pnpm add @refraction-ui/react-badge

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>
  )
}

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'`	`'default'`	Visual style of the badge.
`size`	`'sm' \| 'md'`	`'md'`	Size of the badge.
`className`	`string`	--	Additional CSS classes to apply.