@darksnow-ui/badge

A small status indicator or label component with multiple variants.

Installation

npm install @darksnow-ui/badge
# or
yarn add @darksnow-ui/badge
# or
pnpm add @darksnow-ui/badge

Usage

import { Badge } from "@darksnow-ui/badge"

export function Example() {
  return (
    <Badge variant="default">
      New
    </Badge>
  )
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | "default" \| "secondary" \| "destructive" \| "outline" | "default" | Visual style variant | | className | string | - | Additional CSS classes | | children | ReactNode | - | Badge content |

Variants

Default

Primary badge with accent colors.

<Badge variant="default">Default</Badge>

Secondary

Subtle background, good for less important labels.

<Badge variant="secondary">Secondary</Badge>

Destructive

For warnings or error states.

<Badge variant="destructive">Error</Badge>

Outline

Minimal styling with border.

<Badge variant="outline">Outline</Badge>

Examples

Basic Usage

<Badge>New</Badge>

Status Indicators

<div className="flex gap-2">
  <Badge variant="default">Active</Badge>
  <Badge variant="secondary">Pending</Badge>
  <Badge variant="destructive">Failed</Badge>
  <Badge variant="outline">Draft</Badge>
</div>

With Icons

import { Check, X, Clock, AlertCircle } from "lucide-react"

<div className="flex gap-2">
  <Badge variant="default">
    <Check className="w-3 h-3 mr-1" />
    Completed
  </Badge>
  
  <Badge variant="destructive">
    <X className="w-3 h-3 mr-1" />
    Failed
  </Badge>
  
  <Badge variant="secondary">
    <Clock className="w-3 h-3 mr-1" />
    Pending
  </Badge>
  
  <Badge variant="outline">
    <AlertCircle className="w-3 h-3 mr-1" />
    Warning
  </Badge>
</div>

Notification Badges

<div className="relative inline-block">
  <Button variant="outline">
    Messages
  </Button>
  <Badge 
    variant="destructive" 
    className="absolute -top-2 -right-2 px-1 min-w-[1.25rem] h-5 text-[10px] rounded-full"
  >
    3
  </Badge>
</div>

Team Member Roles

<div className="space-y-4">
  <div className="flex items-center space-x-4">
    <div className="w-10 h-10 rounded-full bg-theme-accent flex items-center justify-center">
      JD
    </div>
    <div className="flex-1">
      <p className="text-sm font-medium">John Doe</p>
      <p className="text-xs text-theme-content-muted">[email protected]</p>
    </div>
    <Badge variant="outline">Admin</Badge>
  </div>
  
  <div className="flex items-center space-x-4">
    <div className="w-10 h-10 rounded-full bg-theme-highlight flex items-center justify-center">
      AB
    </div>
    <div className="flex-1">
      <p className="text-sm font-medium">Alice Brown</p>
      <p className="text-xs text-theme-content-muted">[email protected]</p>
    </div>
    <Badge variant="secondary">Member</Badge>
  </div>
</div>

Progress States

<div className="space-y-2">
  <div className="flex items-center justify-between">
    <span>Project Alpha</span>
    <Badge variant="secondary">In Progress</Badge>
  </div>
  
  <div className="flex items-center justify-between">
    <span>Project Beta</span>
    <Badge variant="default">Completed</Badge>
  </div>
  
  <div className="flex items-center justify-between">
    <span>Project Gamma</span>
    <Badge variant="destructive">Failed</Badge>
  </div>
  
  <div className="flex items-center justify-between">
    <span>Project Delta</span>
    <Badge variant="outline">Draft</Badge>
  </div>
</div>

Category Tags

<div className="flex flex-wrap gap-2">
  <Badge variant="outline">React</Badge>
  <Badge variant="outline">TypeScript</Badge>
  <Badge variant="outline">Tailwind CSS</Badge>
  <Badge variant="outline">Node.js</Badge>
  <Badge variant="outline">Next.js</Badge>
</div>

All Variants Demo

<div className="flex flex-wrap gap-2">
  <Badge variant="default">Default</Badge>
  <Badge variant="secondary">Secondary</Badge>
  <Badge variant="destructive">Destructive</Badge>
  <Badge variant="outline">Outline</Badge>
</div>

Styling

The badge uses these CSS classes:

• Base: inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-theme-accent-sm focus:ring-offset-2
• default: border-transparent bg-theme-accent text-theme-accent-content shadow-theme-sm hover:bg-theme-accent-on
• secondary: border-transparent bg-theme-bg text-theme-content-subtle hover:bg-theme-bg-deep
• destructive: border-transparent bg-theme-danger text-theme-danger-content shadow-theme-sm hover:bg-theme-danger-on
• outline: text-theme-content border-theme-mark-light

Accessibility

• Uses semantic HTML with proper focus management
• Supports keyboard navigation when interactive
• Color contrast meets WCAG guidelines
• Screen reader friendly

Theming

The badge uses CSS custom properties for theming:

• --theme-accent - Default badge background
• --theme-accent-content - Default badge text
• --theme-danger - Destructive badge background
• --theme-bg - Secondary badge background
• --theme-mark-light - Outline badge border

Technical Details

• Built with class-variance-authority for variant management
• Uses clsx for conditional class names
• Extends HTML div attributes
• Small and lightweight component

License

MIT © DarkSnow UI