Badge

Installation

Usage

import { Badge } from "@/components/ui/badge"

export default function App() {
  return (
    <Badge variant="soft">
      Beta
    </Badge>
  )
}

import { Badge } from "@/components/ui/badge"

export default function App() {
  return (
    <Badge variant="soft">
      Beta
    </Badge>
  )
}

Examples

Weights

Demonstrates the built-in surface variants. Reach for variant before falling back to custom classes.

With Icon

You can easily incorporate icons inside the badge to provide more visual context.

With Spinner

A badge can display a loading state by including a spinner animation.

Link

The badge can be rendered as a clickable element.

Custom Colors

Use className as an escape hatch when you need custom semantic colors on top of the default badge surface.

Styling

Badge now follows the same small prop-first direction as the other migrated form and action primitives. Start with variant and size, then use className for one-off overrides.

/* Variants */
<Badge variant="default" />
<Badge variant="soft" />
<Badge variant="strong" />
<Badge variant="transparent" />

/* Sizes (defaults to md) */
<Badge size="sm" />
<Badge size="md" />
<Badge size="lg" />

/* Escape hatch */
<Badge className="bg-emerald-50/50 text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-300" />

/* Variants */
<Badge variant="default" />
<Badge variant="soft" />
<Badge variant="strong" />
<Badge variant="transparent" />

/* Sizes (defaults to md) */
<Badge size="sm" />
<Badge size="md" />
<Badge size="lg" />

/* Escape hatch */
<Badge className="bg-emerald-50/50 text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-300" />

API Reference