Skip to main content

Badge

A clean, minimal badge component for displaying status indicators, labels, and small pieces of information. Follows Headless UI design principles with subtle borders and consistent spacing.

Basic Usage​

Live Editor
<Badge>Default Badge</Badge>
Result
Loading...

Variants​

The Badge component supports different visual variants to convey different meanings:

Live Editor
<div className='flex flex-wrap gap-2'>
  <Badge variant='default'>Default</Badge>
  <Badge variant='primary'>Primary</Badge>
  <Badge variant='secondary'>Secondary</Badge>
  <Badge variant='success'>Success</Badge>
  <Badge variant='warning'>Warning</Badge>
  <Badge variant='danger'>Danger</Badge>
  <Badge variant='info'>Info</Badge>
  <Badge variant='outline'>Outline</Badge>
</div>
Result
Loading...

Sizes​

Choose from three different sizes to fit your design needs:

Live Editor
<div className='flex flex-wrap items-center gap-2'>
  <Badge size='sm'>Small</Badge>
  <Badge size='md'>Medium</Badge>
  <Badge size='lg'>Large</Badge>
</div>
Result
Loading...

Rounded Style​

Toggle between rounded and standard border radius:

Live Editor
<div className='flex flex-wrap gap-2'>
  <Badge>Standard</Badge>
  <Badge rounded>Rounded</Badge>
</div>
Result
Loading...

Custom Styling​

Apply custom classes and HTML attributes:

Live Editor
<div className='flex flex-wrap gap-2'>
  <Badge className='bg-purple-100 text-purple-800 border-purple-200'>
    Custom Colors
  </Badge>
  <Badge data-testid='custom-badge' title='Custom tooltip'>
    With Attributes
  </Badge>
</div>
Result
Loading...

Real-world Examples​

Status Indicators​

Live Editor
<div className='flex flex-wrap gap-2'>
  <Badge variant='success'>Active</Badge>
  <Badge variant='warning'>Pending</Badge>
  <Badge variant='danger'>Error</Badge>
  <Badge variant='info'>Processing</Badge>
</div>
Result
Loading...

Category Tags​

Live Editor
<div className='flex flex-wrap gap-2'>
  <Badge variant='primary' size='sm'>
    React
  </Badge>
  <Badge variant='primary' size='sm'>
    TypeScript
  </Badge>
  <Badge variant='primary' size='sm'>
    Tailwind CSS
  </Badge>
  <Badge variant='primary' size='sm'>
    Docusaurus
  </Badge>
</div>
Result
Loading...

Notification Counts​

Live Editor
<div className='flex flex-wrap items-center gap-2'>
  <Badge variant='danger' size='sm'>
    3
  </Badge>
  <Badge variant='warning' size='sm'>
    12
  </Badge>
  <Badge variant='info' size='sm'>
    99+
  </Badge>
</div>
Result
Loading...

API Reference​

Props​

PropTypeDefaultDescription
variant'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'outline''default'Visual style variant
size'sm' | 'md' | 'lg''md'Size of the badge
roundedbooleanfalseWhether to use rounded corners
classNamestring-Additional CSS classes
childrenReactNode-Badge content

Variants​

  • default: Neutral gray styling for general use
  • primary: Blue styling for primary actions
  • secondary: Gray styling for secondary actions
  • success: Green styling for success states
  • warning: Yellow styling for warning states
  • danger: Red styling for error or danger states
  • info: Sky blue styling for informational content
  • outline: White background with gray border for subtle emphasis

Sizes​

  • sm: Small size with px-2 py-0.5 text-xs
  • md: Medium size with px-2.5 py-1 text-sm (default)
  • lg: Large size with px-3 py-1.5 text-base

Accessibility​

The Badge component renders as a <span> element and passes through all HTML attributes. It's designed to be semantic and accessible:

  • Uses appropriate contrast ratios for text readability
  • Supports custom ARIA attributes when needed
  • Maintains proper focus states
  • Works with screen readers

Design Principles​

The Badge component follows these design principles:

  • Minimal: Clean, simple design without unnecessary visual noise
  • Consistent: Uniform spacing and sizing across all variants
  • Accessible: High contrast and readable text
  • Flexible: Easy to customize and extend with custom classes
  • Semantic: Uses appropriate colors to convey meaning

Best Practices​

  • Use consistent variants across your application for similar types of information
  • Choose sizes that fit the context - smaller badges for dense layouts, larger ones for emphasis
  • Consider using the rounded variant for a more modern, pill-like appearance
  • Combine with icons when appropriate to enhance visual communication
  • Use semantic colors - green for success, red for errors, etc.