Badge
Displays a badge or a component that looks like a badge.
Made by shadcn
Loading component...
Installation
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...
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.
Built by malinskibeniamin. The source code is available on GitHub.