Badge
Displays a badge or a component that looks like a badge.
Made by shadcnPowered by
Installation
Loading component...
Usage
Basic Examples
import { Badge } from "@/components/redpanda-ui/badge"
// Default badge
<Badge>Default</Badge>
<ComponentPreview name="badge-demo" />
### Status Indicators
```tsx showLineNumbers
<div className="flex gap-2">
<Badge>Active</Badge>
<Badge variant="info">Pending</Badge>
<Badge variant="info-inverted">Draft</Badge>
<Badge variant="destructive">Error</Badge>
</div>With Icons
import { CheckCircle, AlertCircle, Clock, X } from "lucide-react"
<div className="flex gap-2 flex-wrap">
<Badge>
<CheckCircle />Completed
</Badge>
<Badge variant="secondary">
<Clock />In Progress
</Badge>
<Badge variant="outline">
<AlertCircle />Warning
</Badge>
<Badge variant="destructive">
<X />Failed
</Badge>
</div>As Link
import { Link } from "next/link"
<Badge asChild>
<Link href="/category/react">React</Link>
</Badge>Count Badges
<div className="flex gap-4">
<div className="relative">
<span>Notifications</span>
<Badge className="absolute -top-2 -right-2 h-5 w-5 rounded-full p-0 text-xs">
3
</Badge>
</div>
<div className="relative">
<span>Messages</span>
<Badge variant="destructive" className="absolute -top-2 -right-2 h-5 w-5 rounded-full p-0 text-xs">
12
</Badge>
</div>
</div>When to use
Use Badge to highlight status, categories, or metadata in a compact, visually distinct way:
Use Badge when:
- Displaying status information (Active, Pending, Complete)
- Showing categories or tags
- Indicating counts or numbers
- Highlighting important metadata
- Creating filterable tags or labels
Don't use Badge when:
- Content is too long (use a label or text instead)
- You need complex interactive elements (use Button instead)
- Information is not supplementary (use primary text instead)
- Badge would be the only way to convey critical information
Variants
Badge provides 28 variants organized in semantic groups, each with three styles: base (filled), inverted (subtle background), and outline (border only).
| Group | Base | Inverted | Outline | Use for |
|---|---|---|---|---|
| Neutral | neutral | neutral-inverted | neutral-outline | Default, general-purpose labels |
| Simple | simple | simple-inverted | simple-outline | De-emphasized, secondary metadata |
| Info | info | info-inverted | info-outline | Informational status, pending states |
| Accent | accent | accent-inverted | accent-outline | Brand-related, featured items |
| Success | success | success-inverted | success-outline | Positive status, completions |
| Warning | warning | warning-inverted | warning-outline | Caution, degraded states |
| Destructive | destructive | destructive-inverted | destructive-outline | Errors, critical issues |
| Disabled | disabled | disabled-inverted | disabled-outline | Inactive, unavailable |
| Primary | primary | primary-inverted | primary-outline | Primary actions, indigo theme |
| Secondary | secondary | secondary-inverted | secondary-outline | Secondary actions, dark blue theme |
Additionally, outline is available as a standalone generic border-only variant.
Default variant is neutral. Default size is md.
Sizes
| Size | Height | Description |
|---|---|---|
sm | 20px | Compact, for tight layouts and tables |
md | 24px | Default size |
lg | 32px | Prominent, for headers and callouts |
Anatomy
Badge
┌──────────────────────────┐
│ [Icon] Text Content │
│ ↑ auto-sized per size │
└──────────────────────────┘Key features:
- Slot support: Use
asChildto render as a Link or Button - Icon sizing: Icons auto-scale per size variant (sm: 12px, md: 14px, lg: 16px)
- Truncation: Long text truncates with ellipsis
Examples
Sizes
Loading component...
With Icon
Loading component...
Variant showcase
Loading component...
Removable
Loading component...
Count
Loading component...
Link
Loading component...
Announced
Loading component...
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 tooltip
- Badge count may exceed available space
Use Badge directly when:
- Showing a single status indicator
- Fixed, known number of badges
- Full control over layout and spacing needed
Credits
- We take our inspiration from Shadcn UI for the badge component and style.
Recent changes
- patchv1.2.0Pin shipped dependency floors to the version we develop against. Registry items now declare ranges like `^5.1.9` (the actual installed version) instead of collapsing to `^5.0.0`, so consumers start on the known-tested b…#133
- minorv1.1.0Theme docs refresh, readability pass on semantic foregrounds, and consumer-facing Base UI regression fixes.#121
- minorv1.0.0Post-Base-UI polish. Public API unchanged.#116
- majorv1.0.0Migrate every Radix-based primitive to `@base-ui/react@^1.4.0` (Base UI).#114
- minorv0.3.0Add theme-provider component to the registry with documentation and tests. Includes playground type improvements (export RegistryItem, remove as-const boilerplate) and docs site dark mode border color fix.#109
Built by malinskibeniamin. The source code is available on GitHub.