Badge

Stable

A short, non-interactive label that reports status or category. Badges are read, not clicked — anything that responds to a press is a Button.

Added in v1.0.0 · import from "@borneo/react"

Interactive previewPermalink to this section

Badges are the one place the status palette appears at small sizes, so each variant is paired with a word.

Deployed

Variant

Size

Dot

badge-preview.tsx

<Badge
  variant="neutral"
  size="md"
>
  Deployed
</Badge>

Deployed

Each variant carries a meaning. Using danger red for a category label teaches people to ignore red.

Internal

Neutral

Categories, counts

Pro

Brand

Plan tiers, highlights

Deployed

Success

Healthy, complete

Expiring

Warning

Needs attention

Failed

Danger

Failed, blocked

v2.4.0

Outline

Version tags, metadata

Small in table cells and beside titles; medium everywhere else.

DeployedDeployedv2.4.0v2.4.0

Badges earn their space by answering a question the surrounding text does not.