Badge

Powered by

Shadcn UI

Installation

Usage

Badge has a two-axis API: a semantic tone for color crossed with a variant for emphasis. Both are optional — the default is a neutral, solid badge, and it renders as a rounded-full pill.

import { Badge } from "@/components/redpanda-ui/badge"
import { CheckIcon } from "lucide-react"

// Default (neutral tone, solid emphasis)
<Badge>Neutral</Badge>

// Semantic color via `tone`
<Badge tone="success">Live</Badge>
<Badge tone="destructive">Error</Badge>

// Emphasis via `variant` (solid | subtle | outline)
<Badge tone="info" variant="subtle">Draft</Badge>
<Badge tone="warning" variant="outline">Degraded</Badge>

// Sizes (sm | md | lg)
<Badge size="sm">Small</Badge>
<Badge size="lg">Large</Badge>

// Leading icon
<Badge tone="success" icon={<CheckIcon />}>Verified</Badge>

// As a link
<Badge tone="primary" variant="subtle" render={<a href="/tags/react">React</a>} />

// Disabled
<Badge disabled>Archived</Badge>

API

tone — semantic color

variant — emphasis

Other props

• size — sm (20px) · md (24px, default) · lg (32px). Icons auto-scale per size (12 / 14 / 16px).
• disabled — renders the inactive appearance and sets aria-disabled.
• icon — a leading icon, sized to the badge; composes with text children.
• render — render as another element (e.g. a link or button) via Base UI's polymorphic render prop.

Examples

With icon

Sizes

Count / notification

Removable (filter chips)

As a link

Live status (announced)

When to use

Use Badge when:

• Displaying status or state (Active, Pending, Complete)
• Showing categories, tags, or metadata
• Indicating counts or numbers
• Creating filterable tags or labels

Don't use Badge when:

• The content is long-form (use a label or text instead)
• You need a real interactive control (use Button instead)
• The information is primary, not supplementary
• It would be the only way to convey critical information (pair it with text)

Deprecated variants

Before the two-axis API, Badge exposed a flat list of variant strings — a 10-color × 3-style matrix (base, -inverted, -outline) plus shadcn aliases. The secondary and simple color families and the default/ghost/link aliases were dropped from the recommended set.

Related Components

BadgeGroup

When displaying multiple badges with overflow handling, use BadgeGroup instead of manually arranging badges:

import { Badge } from "@/components/redpanda-ui/badge"
import { BadgeGroup } from "@/components/redpanda-ui/badge-group"

// Shows: [React] [TypeScript] [Tailwind] [+1]
<BadgeGroup maxVisible={3}>
  <Badge>React</Badge>
  <Badge>TypeScript</Badge>
  <Badge>Tailwind</Badge>
  <Badge>Next.js</Badge>
</BadgeGroup>

Use BadgeGroup when:

• Displaying a dynamic list of tags/badges
• You need "+N more" overflow handling with a tooltip
• Badge count may exceed available space

Credits

• We take our inspiration from Shadcn UI for the badge component and style.