Episode 10 of 19

Badges

Create badge and pill components with Tailwind CSS. Learn to build status indicators, notification counts, tag labels, and color-coded badges for various UI contexts.

What Are Badges?

Badges are small UI elements used to display status, counts, categories, or tags. They are typically inline elements with a background color, small font size, and rounded corners. In Tailwind, badges are built with a handful of utility classes.

Basic Badge

<span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">
  Badge
</span>

The core pattern: background color + text color + small font + horizontal padding + rounded corners.

Pill Badges

Use rounded-full for a fully rounded pill shape:

<span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-3 py-1 rounded-full">
  Pill Badge
</span>

Color Variants

Create badges in every color by pairing light backgrounds with darker text:

<div class="flex flex-wrap gap-2">
  <span class="bg-gray-100 text-gray-800 text-xs font-semibold px-3 py-1 rounded-full">Default</span>
  <span class="bg-red-100 text-red-800 text-xs font-semibold px-3 py-1 rounded-full">Error</span>
  <span class="bg-yellow-100 text-yellow-800 text-xs font-semibold px-3 py-1 rounded-full">Warning</span>
  <span class="bg-green-100 text-green-800 text-xs font-semibold px-3 py-1 rounded-full">Success</span>
  <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-3 py-1 rounded-full">Info</span>
  <span class="bg-purple-100 text-purple-800 text-xs font-semibold px-3 py-1 rounded-full">Purple</span>
  <span class="bg-pink-100 text-pink-800 text-xs font-semibold px-3 py-1 rounded-full">Pink</span>
</div>

Outlined Badges

Use a border instead of a background:

<div class="flex flex-wrap gap-2">
  <span class="border border-gray-300 text-gray-700 text-xs font-semibold px-3 py-1 rounded-full">Default</span>
  <span class="border border-red-300 text-red-700 text-xs font-semibold px-3 py-1 rounded-full">Error</span>
  <span class="border border-green-300 text-green-700 text-xs font-semibold px-3 py-1 rounded-full">Success</span>
  <span class="border border-blue-300 text-blue-700 text-xs font-semibold px-3 py-1 rounded-full">Info</span>
</div>

Dark / Solid Badges

<div class="flex flex-wrap gap-2">
  <span class="bg-gray-800 text-white text-xs font-semibold px-3 py-1 rounded-full">Dark</span>
  <span class="bg-red-600 text-white text-xs font-semibold px-3 py-1 rounded-full">Error</span>
  <span class="bg-green-600 text-white text-xs font-semibold px-3 py-1 rounded-full">Success</span>
  <span class="bg-indigo-600 text-white text-xs font-semibold px-3 py-1 rounded-full">Primary</span>
</div>

Notification Count Badge

A common pattern for showing unread counts on icons or buttons:

<!-- Relative container -->
<div class="relative inline-block">
  <!-- Icon / Button -->
  <button class="bg-gray-100 p-3 rounded-full text-gray-700 hover:bg-gray-200">
    🔔
  </button>
  <!-- Count badge -->
  <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs font-bold w-5 h-5 flex items-center justify-center rounded-full">
    3
  </span>
</div>

Key techniques: the parent is relative inline-block, and the badge uses absolute positioning with negative offsets (-top-1 -right-1) to overlap the corner.

Status Dot Badge

<div class="flex items-center space-x-2">
  <span class="flex items-center">
    <span class="w-2 h-2 bg-green-500 rounded-full mr-1.5"></span>
    <span class="text-sm text-gray-700">Online</span>
  </span>

  <span class="flex items-center">
    <span class="w-2 h-2 bg-yellow-500 rounded-full mr-1.5"></span>
    <span class="text-sm text-gray-700">Away</span>
  </span>

  <span class="flex items-center">
    <span class="w-2 h-2 bg-red-500 rounded-full mr-1.5"></span>
    <span class="text-sm text-gray-700">Offline</span>
  </span>
</div>

Badges With Icons

<span class="inline-flex items-center bg-green-100 text-green-800 text-xs font-semibold px-3 py-1 rounded-full">
  <svg class="w-3 h-3 mr-1.5" fill="currentColor" viewBox="0 0 20 20">
    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
  </svg>
  Verified
</span>

<span class="inline-flex items-center bg-red-100 text-red-800 text-xs font-semibold px-3 py-1 rounded-full">
  <svg class="w-3 h-3 mr-1.5" fill="currentColor" viewBox="0 0 20 20">
    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
  </svg>
  Rejected
</span>

Badges in Context — Blog Post Card

<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-md">
  <img src="https://picsum.photos/400/180" alt="" class="w-full h-44 object-cover">
  <div class="p-5">
    <div class="flex flex-wrap gap-2 mb-3">
      <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded-full">Tailwind</span>
      <span class="bg-emerald-100 text-emerald-800 text-xs font-semibold px-2.5 py-0.5 rounded-full">CSS</span>
      <span class="bg-amber-100 text-amber-800 text-xs font-semibold px-2.5 py-0.5 rounded-full">Tutorial</span>
    </div>
    <h3 class="text-lg font-bold text-gray-900">Building Modern UIs</h3>
    <p class="mt-1 text-sm text-gray-500">A guide to crafting pixel-perfect interfaces with utility-first CSS.</p>
  </div>
</div>

Recap

  • Badges are built with: background + text color + text-xs + font-semibold + px-* + rounded-full.
  • Use light bg (100) with dark text (800) for soft badges, or solid bg (600) with white text for bold badges.
  • Notification counts use absolute positioning on a relative parent.
  • Status dots are tiny w-2 h-2 rounded-full colored circles.

Next, we will learn about the @apply directive to extract reusable styles.

Web DevelopmentTailwind CSSCSSComponentsBadges