Badge

A small status indicator with multiple style variants. Used for tags, statuses, and categorization.

Variants

Default

Secondary

Error

Outline

Next to a heading

API Keys

Beta

Count indicator

Installation

pnpm

pnpm dlx @hex-core/cli add badge

Status badges in a row

Three statuses rendered with semantically distinct variants

tsx

<div className="flex items-center gap-2">
  <Badge>Active</Badge>
  <Badge variant="secondary">Pending</Badge>
  <Badge variant="outline">Archived</Badge>
</div>

With icon

Inline SVG glyph paired with a label — the canonical 'verified' pattern

tsx

<Badge variant="secondary" className="gap-1">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2.5"
    strokeLinecap="round"
    strokeLinejoin="round"
    className="h-3 w-3"
    aria-hidden="true"
  >
    <polyline points="20 6 9 17 4 12" />
  </svg>
  Verified
</Badge>

Variant values

variantVisual style variants

default

secondary

destructive

outline

Value	Description
`default`default	Primary colored badge
`secondary`	Muted background badge
`destructive`	Red/danger badge
`outline`	Bordered badge, no fill

API Reference

Prop	Type	Default	Description
`variant`	`"default" \| "secondary" \| "destructive" \| "outline"`	default	Visual style
`className`	`string`	—	Additional CSS classes

AI Guidance

When to use

Use for status indicators, tags, counts, categories. Place next to headings, in lists, or in table cells.

When not to use

Don't use for interactive actions (use Button). Don't use for long text content.

Common mistakes

Using destructive variant for non-error states
Badge text too long
Reaching for Badge to render a small button — Badge is a decorative div and not focusable; use Button with size='sm' for an interactive control

Accessibility

Purely decorative by default. Add role='status' for dynamic status badges.

Related components

Token budget: 200

Verified against @hex-core/components@1.12.0

Edit this page on GitHub