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>
// Different variants
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="destructive">Destructive</Badge>Status Indicators
<div className="flex gap-2">
<Badge variant="default">Active</Badge>
<Badge variant="secondary">Pending</Badge>
<Badge variant="outline">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 variant="default">
<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
Anatomy
The Badge component is a simple, flexible inline element with variant-based styling:
Badge Container
┌─────────────────────────────────────────────────┐
│ Badge Element (span or Slot) │
│ ┌─────────────────────────────────────────────┐ │
│ │ [Icon] Text Content │ │
│ │ - Icons automatically sized (12px) │ │
│ │ - Text truncated if too long │ │
│ │ - Consistent padding (8px x 4px) │ │
│ └─────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────┘
Variant Styles:
default - Primary background, white text
secondary - Muted background, dark text
outline - Border only, inherit text color
destructive - Red background, white textComponent Structure:
- Badge (Root): Main container with variant-based styling
- Content: Text and optional icons with automatic sizing
- Slot Support: Can wrap other components with asChild prop
Key Features:
- Variants: Four built-in styles for different use cases
- Icon Support: Automatic icon sizing and spacing
- Responsive: Truncates long text gracefully
- Accessible: Proper focus states and ARIA support
- Composable: Works as wrapper for links and buttons
Styling Details:
- Size: Small text (12px) with minimal padding
- Shape: Rounded corners for modern appearance
- Colors: Theme-aware with proper contrast ratios
- Hover States: Interactive when used with asChild
- Focus: Visible focus rings for accessibility
Examples
Default
Loading component...
Colors
Loading component...
Sizes
Loading component...
With Icon
Loading component...
Warning
Loading component...
Info
Loading component...
Accent (Brand)
Loading component...
Credits
- We take our inspiration from Shadcn UI for the badge component and style.
Built by malinskibeniamin. The source code is available on GitHub.