Badge

Small status descriptors for UI elements.

Badge Variants

Default
Secondary
Outline
Success
Warning
Error
Info

Badge Sizes

Small
Medium
Large

With Icons

Completed
Pending
Failed
Information

Count Badges

5
42
99+
7
3

Usage

import { Badge } from "@/components/badge"
import { Check, Bell } from 'lucide-react'

export default function MyComponent() {
  return (
    <div className="space-y-4">
      <Badge>Default</Badge>
      
      <Badge variant="success" icon={<Check className="h-3 w-3" />}>
        Completed
      </Badge>
      
      <Badge variant="error" count={5} />
      
      <Badge variant="info" icon={<Bell className="h-3 w-3" />} count={3} />
    </div>
  )
}

Props

Name
Type
Default
Description
variant
string
"default"
Badge style variant: "default", "secondary", "outline", etc.
size
string
"md"
Size of the badge: "sm", "md", or "lg".
icon
ReactNode
undefined
Icon to display in the badge.
count
number
undefined
Numeric value to display in the badge.
max
number
99
Maximum count to display before showing "max+".