Badge Component

A lightweight, theme-aware badge component for labels, tags, and status indicators with full light and dark mode support.

Mahamure Kedar
Back to Components

Overview

A minimal yet polished badge component designed for modern UIs. It automatically adapts to light and dark themes using Tailwind CSS, providing consistent contrast, subtle depth, and a clean pill-shaped design.

Where to Use

  • Skill tags in portfolios
  • Status indicators (Active, Beta, New)
  • Category labels
  • Feature highlights
  • Metadata chips

Why Use This Component

  • Theme-aware out of the box (light & dark)
  • No JavaScript required
  • Consistent design system friendly
  • Accessible contrast and spacing
  • Easy to reuse across projects

Built With

ReactTailwind CSS