Variants

Default

Secondary

Outline

Destructive

Custom

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

export function BadgeExamples() {
  return (
    <div className="flex flex-wrap gap-3">
      <Badge>Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="destructive">Destructive</Badge>
    </div>
  )
}

Pattern usage

Use badges inline with headings, list items, or action labels to indicate status without overwhelming layouts.

Remix retry queue

High load

Boost applied

2x credits

Pixexid Remix

New

<div className="flex items-center gap-2 text-sm">
  <span>Pixexid Remix</span>
  <Badge variant="secondary">Beta</Badge>
  <Badge className="bg-accent text-white">New</Badge>
</div>

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'secondary' \| 'destructive' \| 'outline'`	'default'	Maps to semantic color tokens for status and emphasis.
`className`	`string`	—	Extend spacing or layout utilities.

Guidelines

Best practices

Pair with concise labels (≤12 characters) to maintain pill shape.
Reserve the destructive variant for errors or blocked states.
For interactive chips, wrap in `Button` or `Toggle` instead.

Accessibility

Use semantic colors that maintain contrast (badge uses `text-xs` so ensure readability).
When representing dynamic counts, include the number in accessible text (e.g., `aria-label`).
Badges do not convey focus by default—wrap interactive use cases in buttons or links.