Badge (components/ui/badge.tsx)

Overview

A flexible badge component that provides styled indicators with multiple variants and customizable appearance.

Features

• Multiple variants (default, secondary, destructive, outline)
• Rounded design
• Border support
• Hover states
• Focus management
• Ring styling
• Transition effects
• Font customization
• Color variants
• Responsive sizing

Dependencies

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

Props

export interface BadgeProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof badgeVariants> {
  variant?: 'default' | 'secondary' | 'destructive' | 'outline';
  className?: string;
}

Implementation

State Management

No internal state management - component is controlled through props.

Methods

Component uses class-variance-authority for variant management and className merging.

Unique Functionality

• Variant styling system using cva
• Class name merging with utility function
• Hover state management
• Focus ring handling
• Border customization

HTML Structure

<div 
  className={cn(
    badgeVariants({ variant }), 
    className
  )} 
  {...props} 
/>

API Integration

No direct API integration required.

Components Used

No additional components used.

Notes

• Uses class-variance-authority for variants
• Supports custom styling through className
• Implements focus management
• Provides hover states
• Maintains consistent sizing
• Uses semantic HTML elements