@metadiv-studio/badge

A flexible and customizable badge component built with React, TypeScript, and Tailwind CSS. Perfect for displaying status indicators, labels, and small pieces of information in your React applications.

📦 Installation

npm i @metadiv-studio/badge

🎯 Description

The @metadiv-studio/badge package provides a lightweight, accessible badge component that follows modern design principles. Built with:

• React 18+ - Modern React with hooks support
• TypeScript - Full type safety and IntelliSense
• Tailwind CSS - Utility-first CSS framework
• Class Variance Authority (CVA) - Type-safe variant management
• Tailwind Merge - Smart CSS class merging

🚀 Usage

Basic Badge

import { Badge } from '@metadiv-studio/badge';

function App() {
  return (
    <Badge>Default Badge</Badge>
  );
}

Badge Variants

The badge component comes with three built-in variants:

import { Badge } from '@metadiv-studio/badge';

function App() {
  return (
    <div className="space-x-2">
      <Badge variant="default">Default</Badge>
      <Badge variant="destructive">Error</Badge>
      <Badge variant="outline">Outline</Badge>
    </div>
  );
}

Custom Styling

You can customize the badge appearance by passing additional CSS classes:

import { Badge } from '@metadiv-studio/badge';

function App() {
  return (
    <div className="space-y-2">
      <Badge className="bg-blue-500 text-white">Custom Blue</Badge>
      <Badge className="bg-green-500 text-white px-4 py-1">Large Green</Badge>
      <Badge className="bg-purple-500 text-white rounded-full">Rounded</Badge>
    </div>
  );
}

With Icons

Combine with icon libraries for enhanced visual appeal:

import { Badge } from '@metadiv-studio/badge';
import { CheckCircle, AlertCircle, Info } from 'lucide-react';

function App() {
  return (
    <div className="space-x-2">
      <Badge className="bg-green-100 text-green-800">
        <CheckCircle className="w-3 h-3 mr-1" />
        Success
      </Badge>
      <Badge variant="destructive">
        <AlertCircle className="w-3 h-3 mr-1" />
        Warning
      </Badge>
      <Badge variant="outline">
        <Info className="w-3 h-3 mr-1" />
        Info
      </Badge>
    </div>
  );
}

Interactive Badges

Make badges interactive by adding click handlers:

import { Badge } from '@metadiv-studio/badge';
import { useState } from 'react';

function App() {
  const [selectedTags, setSelectedTags] = useState<string[]>([]);

  const tags = ['React', 'TypeScript', 'Tailwind', 'Next.js'];

  const toggleTag = (tag: string) => {
    setSelectedTags(prev => 
      prev.includes(tag) 
        ? prev.filter(t => t !== tag)
        : [...prev, tag]
    );
  };

  return (
    <div className="space-x-2">
      {tags.map(tag => (
        <Badge
          key={tag}
          className={`cursor-pointer transition-all ${
            selectedTags.includes(tag)
              ? 'bg-blue-500 text-white'
              : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
          }`}
          onClick={() => toggleTag(tag)}
        >
          {tag}
        </Badge>
      ))}
    </div>
  );
}

🎨 Variants

| Variant | Description | Default Styles | |---------|-------------|----------------| | default | Primary badge style | Primary colors with subtle background | | destructive | Error/warning style | Red colors for alerts | | outline | Minimal outline style | Transparent with border |

🔧 Props

The Badge component extends standard HTML div attributes and includes:

interface BadgeProps {
  variant?: 'default' | 'destructive' | 'outline';
  className?: string;
  // ... all standard HTML div attributes
}

🎯 Use Cases

• Status indicators - Show current state (online, offline, pending)
• Labels - Categorize content or items
• Tags - Filterable or selectable tags
• Notifications - Display counts or alerts
• Categories - Organize content by type

🎨 Tailwind CSS Integration

This package uses Tailwind CSS for styling. To ensure proper styling in your project, make sure your tailwind.config.js includes:

module.exports = {
  content: [
    // ... your content paths
    "./node_modules/@metadiv-studio/**/*.{js,ts,jsx,tsx}",
  ],
  // ... rest of your config
}

📱 Responsive Design

The badge component is fully responsive and works across all device sizes. The default sizing (h-6 text-xs) provides good readability on both desktop and mobile devices.

♿ Accessibility

• Proper focus states with ring indicators
• Semantic HTML structure
• Keyboard navigation support
• Screen reader friendly

🔗 Dependencies

• React ^18 (peer dependency)
• React DOM ^18 (peer dependency)
• class-variance-authority (for variant management)
• clsx (for conditional classes)
• tailwind-merge (for smart class merging)

📄 License

UNLICENSED - See package.json for details.

🤝 Contributing

This package is part of the @metadiv-studio ecosystem. For issues, feature requests, or contributions, please refer to the main repository.