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 default-tone solid badge, and it renders as a rounded-full pill.

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

// Default (`default` 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="informative" 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 simple family and the ghost/link aliases were dropped from the recommended set, and the two neutral families (neutral and secondary) merged into one called default.

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.