Not FoundElixir UI

Getting Started

Installation

Components

Templates

More

Badge

A versatile component for displaying labels, status indicators, counts, and tags.

Default
Secondary
Destructive
Outline
import { Badge } from './components/ui/badge'

export function BadgeDemo() {
  return (
    <div className="flex items-center gap-2">
      <Badge>Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="outline">Outline</Badge>
    </div>
  )
}

Installation

Install the badge component using the Elixir UI CLI:

npx elixir-labs-ui add badge

Usage

import { Badge } from './components/ui/badge'

// Basic usage
<Badge>New</Badge>

// With variant
<Badge variant="secondary">Beta</Badge>
<Badge variant="destructive">Error</Badge>
<Badge variant="outline">Draft</Badge>

// With custom styling
<Badge className="bg-green-500 text-white">Success</Badge>

Examples

Status Indicators

Active
Inactive
Live
Draft

Notification Counts

Messages
3
Notifications
99+
Updates
12

Tags and Labels

React
TypeScript
Tailwind CSS
Next.js
UI/UX

Custom Colors

Info
Success
Warning
Featured
// Status indicators
<Badge variant="secondary">Active</Badge>
<Badge variant="destructive">Inactive</Badge>

// Notifications
<Badge>3</Badge>
<Badge variant="outline">99+</Badge>

// Tags and labels
<Badge variant="outline">React</Badge>
<Badge variant="outline">TypeScript</Badge>
<Badge variant="outline">Tailwind</Badge>

// Custom colors
<Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200">
  Info
</Badge>
<Badge className="bg-green-100 text-green-800 hover:bg-green-200">
  Success
</Badge>
<Badge className="bg-yellow-100 text-yellow-800 hover:bg-yellow-200">
  Warning
</Badge>

API Reference

PropTypeDefaultDescription
variant'default' | 'secondary' | 'destructive' | 'outline''default'The visual style variant of the badge
classNamestring-Additional CSS classes to apply
childrenReact.ReactNode-The content to display inside the badge

Source Code

You can copy and paste the following code to create your own badge component:

import React from 'react';
import { clsx } from 'clsx';

const Badge = React.forwardRef(({ className, variant = 'default', ...props }, ref) => {
  const variants = {
    default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
    secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
    destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
    outline: 'text-foreground',
  };

  return (
    <div
      ref={ref}
      className={clsx(
        'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
        variants[variant],
        className
      )}
      {...props}
    />
  );
});
Badge.displayName = 'Badge';

export { Badge };

Accessibility

The Badge component follows accessibility best practices:

  • Uses semantic HTML with appropriate ARIA attributes
  • Supports keyboard navigation with focus ring indicators
  • Maintains sufficient color contrast ratios for readability
  • Screen reader friendly with proper content structure

Best Practices

✓ Do

  • • Use badges for status indicators and labels
  • • Keep badge text short and descriptive
  • • Use consistent variants across your app
  • • Consider color meaning and accessibility
  • • Use appropriate size for the context

✗ Don't

  • • Use badges for lengthy text content
  • • Overuse badges in dense interfaces
  • • Use destructive variant for neutral information
  • • Make badges clickable without clear indication
  • • Use only color to convey meaning