Badge

Display a compact label for statuses, categories, versions, and other short pieces of metadata.

Usage

Use a badge to make short metadata easy to scan. The default badge uses the primary intent and a pill-shaped appearance.

Newv2.4Active

<Badge>New</Badge>
<Badge intent="secondary">v2.4</Badge>
<Badge intent="success">Active</Badge>

Intents

Choose an intent based on the meaning of the label. Keep the same meaning for each color throughout the product so readers can recognize statuses without relearning them.

Primary

Use primary for featured labels, new features, or metadata that should receive the most attention.

New

<Badge intent="primary">New</Badge>

Secondary

Use secondary for neutral metadata such as versions, categories, or supporting labels.

v2.4

<Badge intent="secondary">v2.4</Badge>

Success

Use success for healthy, completed, available, or verified states.

Operational

<Badge intent="success">Operational</Badge>

Info

Use info for informational states that do not represent success or require action.

Preview

<Badge intent="info">Preview</Badge>

Warning

Use warning when something needs attention but does not prevent the reader from continuing.

Deprecated

<Badge intent="warning">Deprecated</Badge>

Danger

Use danger for failed, blocked, destructive, or security-sensitive states.

Failed

<Badge intent="danger">Failed</Badge>

Outline

Use outline for low-emphasis metadata when a filled background would compete with nearby content.

Draft

<Badge intent="outline">Draft</Badge>

Shape

Badges are pill-shaped by default. Set isCircle={false} for a compact rounded rectangle.

RoundedCompactv2.4

<Badge>Rounded</Badge>
<Badge isCircle={false}>Compact</Badge>
<Badge intent="secondary" isCircle={false}>v2.4</Badge>

In context

Badges work best next to the item they describe. They can identify a release channel, clarify a feature state, or add severity to a callout.

Edge runtimeBeta

Run request handlers closer to users with a globally distributed runtime.

<div className="flex items-center gap-2">
  <span className="font-medium">Edge runtime</span>
  <Badge intent="info">Beta</Badge>
</div>

Deprecated Migrate to the replacement before upgrading.

<Callout type="warning">
  <div className="flex items-start gap-2">
    <Badge intent="warning">Deprecated</Badge>
    <span>This option will be removed in the next major release.</span>
  </div>
</Callout>

Props

Prop	Type	Default	Description
`intent`	`primary \| secondary \| success \| info \| warning \| danger \| outline`	`primary`	Controls the semantic color treatment.
`isCircle`	`boolean`	`true`	Uses a pill shape when true and a compact rounded rectangle when false.
`className`	`string`		Adds custom utility classes to the badge.

The component also accepts standard HTML attributes supported by a span element.

Best practices

Keep labels short, ideally one or two words.
Use sentence case instead of all caps.
Reserve success, warning, and danger for states with matching meaning.
Do not rely on color alone; use a clear label such as Failed or Deprecated.
Use a button or link when the element needs to perform an action. A badge is descriptive, not interactive.