Badges & Pills

Basic Badges

Standard badges with semantic colors for various states and categories. Use these for status indicators, categories, and labels.

<span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">Default</span>
<span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">Primary</span>
<span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">Success</span>
<span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">Warning</span>
<span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">Danger</span>

Status Badges

Badges specifically designed for showing status information with appropriate colors and indicators.

<!-- Status with indicator dot -->
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
    <svg class="w-2 h-2 mr-1.5" fill="currentColor" viewBox="0 0 8 8">
        <circle cx="4" cy="4" r="3" />
    </svg>
    Active
</span>

<!-- Project status with icons -->
<span class="inline-flex px-2 py-1 text-xs font-semibold rounded-md bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 border border-green-200 dark:border-green-800">
    ✓ Complete
</span>

Notification Badges

Small circular badges for notification counts, status indicators, and alerts. Perfect for icons, avatars, and UI elements.

<!-- Notification count -->
<div class="relative inline-block">
    <svg class="w-6 h-6 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor">...</svg>
    <span class="absolute -top-2 -right-2 inline-flex items-center justify-center px-1.5 py-0.5 text-xs font-bold leading-none text-white bg-red-600 rounded-full min-w-[1.25rem] h-5">3</span>
</div>

<!-- Status indicator dot -->
<div class="relative inline-block">
    <svg class="w-6 h-6 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor">...</svg>
    <span class="absolute -top-1 -right-1 block h-3 w-3 bg-red-600 rounded-full ring-2 ring-white dark:ring-gray-800"></span>
</div>

<!-- Avatar with status -->
<div class="relative inline-block">
    <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white text-sm font-medium">JD</div>
    <span class="absolute bottom-0 right-0 block h-3 w-3 bg-green-400 rounded-full ring-2 ring-white dark:ring-gray-800"></span>
</div>

Pills & Tags

Fully rounded badges for tags, categories, and labels. Perfect for content categorization and filtering.

<!-- Basic pill -->
<span class="inline-flex px-3 py-1 text-sm font-medium rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">Development</span>

<!-- Removable tag -->
<span class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
    JavaScript
    <button type="button" class="ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full text-blue-600 hover:bg-blue-200 hover:text-blue-800 dark:text-blue-300 dark:hover:bg-blue-800 dark:hover:text-blue-100">
        <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
            <path stroke-linecap="round" stroke-width="1.5" d="m1 1 6 6m0-6-6 6"/>
        </svg>
    </button>
</span>

Badge Sizes

Different badge sizes for various contexts and hierarchy levels. Use smaller badges for inline content and larger ones for emphasis.

<!-- Small -->
<span class="inline-flex px-2 py-0.5 text-xs font-medium rounded-md bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">Small</span>

<!-- Default -->
<span class="inline-flex px-3 py-1 text-sm font-medium rounded-md bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">Default</span>

<!-- Large -->
<span class="inline-flex px-4 py-1.5 text-base font-medium rounded-md bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">Large</span>

Interactive Badges

Badges that can be clicked, hovered, or removed. Perfect for filters, selections, and user interactions.

<!-- Clickable badge -->
<button class="inline-flex px-3 py-1 text-sm font-medium rounded-full bg-blue-100 text-blue-800 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-200 dark:hover:bg-blue-800 transition-colors cursor-pointer">
    Click me
</button>

<!-- Selected state -->
<button class="inline-flex px-3 py-1 text-sm font-medium rounded-full bg-blue-600 text-white shadow-sm">
    Selected
</button>

Usage Guidelines

CSS Classes Reference

/* Basic Badge Structure */
.inline-flex.px-2.py-1.text-xs.font-semibold.rounded-full

/* Color Variants */
/* Gray */
.bg-gray-100.text-gray-800.dark:bg-gray-700.dark:text-gray-300

/* Blue */
.bg-blue-100.text-blue-800.dark:bg-blue-900.dark:text-blue-200

/* Green */
.bg-green-100.text-green-800.dark:bg-green-900.dark:text-green-200

/* Yellow */
.bg-yellow-100.text-yellow-800.dark:bg-yellow-900.dark:text-yellow-200

/* Red */
.bg-red-100.text-red-800.dark:bg-red-900.dark:text-red-200

/* Purple */
.bg-purple-100.text-purple-800.dark:bg-purple-900.dark:text-purple-200

/* Size Variations */
/* Small */
.px-2.py-0.5.text-xs

/* Default */
.px-2.py-1.text-xs (or px-3.py-1.text-sm)

/* Large */
.px-4.py-1.5.text-base

/* Interactive States */
/* Hover */
.hover:bg-blue-200.dark:hover:bg-blue-800

/* Selected */
.bg-blue-600.text-white.shadow-sm

/* Notification Badges */
/* Count Badge */
.absolute.-top-2.-right-2.inline-flex.items-center.justify-center.px-1.5.py-0.5.text-xs.font-bold.leading-none.text-white.bg-red-600.rounded-full.min-w-[1.25rem].h-5

/* Status Dot */
.absolute.bottom-0.right-0.block.h-3.w-3.bg-green-400.rounded-full.ring-2.ring-white.dark:ring-gray-800