Badge

A versatile badge component for labels, status indicators, and notifications with comprehensive dark mode support and multiple variants.

Features

Multiple Variants: Default, secondary, destructive, success, warning, outline, and ghost
Flexible Sizing: Small, default, and large sizes
Status Indicators: Specialized badges with dot indicators for status display
Notification Badges: Count badges with overflow handling
Interactive Badges: Removable badges for tags and filters
Dark Mode: Full support for light and dark themes
TypeScript: Fully typed with excellent IntelliSense

Installation

The Badge component is included in the @bao-ui/react package.

Basic Usage

import { Badge } from '@bao-ui/react'
 
export function BasicBadge() {
  return <Badge>Default Badge</Badge>
}

Variants

<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="ghost">Ghost</Badge>

Sizes

<Badge size="sm">Small</Badge>
<Badge size="default">Default</Badge>
<Badge size="lg">Large</Badge>

Status Badges

Status badges are perfect for displaying status information with optional dot indicators.

// Without dot indicator
<StatusBadge status="success">Active</StatusBadge>
<StatusBadge status="warning">Pending</StatusBadge>
<StatusBadge status="destructive">Error</StatusBadge>
 
// With dot indicator
<StatusBadge status="success" showDot>Online</StatusBadge>
<StatusBadge status="warning" showDot>Away</StatusBadge>
<StatusBadge status="destructive" showDot>Offline</StatusBadge>

Notification Badges

Notification badges are designed for displaying counts, with automatic overflow handling.

// Basic notification badge
<NotificationBadge count={3} />
 
// With max limit (shows "99+" when count > 99)
<NotificationBadge count={150} max={99} />
 
// Show zero (hidden by default)
<NotificationBadge count={0} showZero />
 
// Positioned on an element
<div className="relative">
  <div className="h-8 w-8 rounded bg-muted"></div>
  <NotificationBadge count={5} className="absolute -right-1 -top-1" />
</div>

Interactive Badges

Interactive badges support removal functionality, perfect for tags and filters.

import { useState } from 'react'
import { InteractiveBadge } from '@bao-ui/react'
 
export function TagList() {
  const [tags, setTags] = useState(['React', 'TypeScript', 'CSS'])
 
  const removeTag = tagToRemove => {
    setTags(tags.filter(tag => tag !== tagToRemove))
  }
 
  return (
    <div className="flex flex-wrap gap-2">
      {tags.map(tag => (
        <InteractiveBadge
          key={tag}
          variant="secondary"
          removable
          onRemove={() => removeTag(tag)}
        >
          {tag}
        </InteractiveBadge>
      ))}
    </div>
  )
}

Use Cases

API Reference

Badge

The base badge component with multiple variants and sizes.

Prop	Type	Default	Description
`variant`	`'default' \| 'secondary' \| 'destructive' \| 'success' \| 'warning' \| 'outline' \| 'ghost'`	`'default'`	Visual variant of the badge
`size`	`'sm' \| 'default' \| 'lg'`	`'default'`	Size of the badge
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	Content of the badge

StatusBadge

Badge component specifically designed for status indicators.

Prop	Type	Default	Description
`status`	`'success' \| 'warning' \| 'destructive' \| 'default' \| 'secondary'`	-	Status type
`showDot`	`boolean`	`false`	Whether to show a dot indicator
`size`	`'sm' \| 'default' \| 'lg'`	`'default'`	Size of the badge
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	Content of the badge

NotificationBadge

Badge component for displaying notification counts.

Prop	Type	Default	Description
`count`	`number`	-	Number to display
`max`	`number`	`99`	Maximum number before showing ”+“
`showZero`	`boolean`	`false`	Whether to show the badge when count is 0
`className`	`string`	-	Additional CSS classes

InteractiveBadge

Badge component with removal functionality.

Prop	Type	Default	Description
`removable`	`boolean`	`false`	Whether the badge can be removed
`onRemove`	`() => void`	-	Callback when remove button is clicked
`variant`	`'default' \| 'secondary' \| 'destructive' \| 'success' \| 'warning' \| 'outline' \| 'ghost'`	`'default'`	Visual variant of the badge
`size`	`'sm' \| 'default' \| 'lg'`	`'default'`	Size of the badge
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	Content of the badge

Accessibility

The Badge components follow accessibility best practices:

Uses semantic HTML elements
Provides proper contrast ratios for all variants
Interactive badges include proper focus management
Screen reader friendly with appropriate ARIA labels
Remove buttons include accessible labels

Examples

E-commerce Product Tags

<div className="flex flex-wrap gap-2">
  <Badge variant="success">Free Shipping</Badge>
  <Badge variant="warning">Limited Stock</Badge>
  <Badge variant="outline">New Arrival</Badge>
  <Badge variant="secondary">Best Seller</Badge>
</div>

Form Validation

<div className="space-y-2">
  <div className="flex items-center gap-2">
    <input type="email" className="..." />
    <StatusBadge status="success" showDot>
      Valid
    </StatusBadge>
  </div>
  <div className="flex items-center gap-2">
    <input type="password" className="..." />
    <StatusBadge status="destructive" showDot>
      Invalid
    </StatusBadge>
  </div>
</div>

Filter Tags

const [filters, setFilters] = useState(['React', 'TypeScript'])
 
return (
  <div className="flex flex-wrap gap-2">
    {filters.map(filter => (
      <InteractiveBadge
        key={filter}
        variant="outline"
        removable
        onRemove={() => removeFilter(filter)}
      >
        {filter}
      </InteractiveBadge>
    ))}
  </div>
)

Switch Dialog