Tailwind CSS Badges (Stylish & Responsive Components)

Components

Tailwind CSS Badges - Madhuranjan UI

Enhance your UI with our beautifully designed Tailwind CSS badges. From simple labels to interactive notification indicators, our badges are lightweight, fully responsive, and easy to integrate into your project.

Basic Badges

Basic badges are small visual indicators used for labeling and categorization. These are great for tagging elements, highlighting statuses, or adding extra information to UI components.

PrimaryDangerSuccessWarningInfoNeutralGradientOceanSoft GraySoft Success

1<div class="flex flex-wrap gap-4 justify-center items-center bg-gray-50 p-6 dark:bg-gray-900">
2        
3        <!-- {/* 1️⃣ Solid Badges */} -->
4        <span class="px-3 py-1 text-sm font-semibold text-white bg-blue-500 rounded-lg">Primary</span>
5        <span class="px-3 py-1 text-sm font-semibold text-white bg-red-500 rounded-lg">Danger</span>
6        <span class="px-3 py-1 text-sm font-semibold text-white bg-green-500 rounded-lg">Success</span>
7        <span class="px-3 py-1 text-sm font-semibold text-white bg-yellow-500 rounded-lg">Warning</span>
8  
9        <!-- {/* 2️⃣ Outline Badges */} -->
10        <span class="px-3 py-1 text-sm font-semibold border border-blue-500 text-blue-500 rounded-lg">Info</span>

Border Badges

Border badges add a clean, outlined style to labels while maintaining a subtle background. These are perfect for professional dashboards and highlighting elements in a non-intrusive way.

InfoDangerSuccessWarningDashed InfoDashed NeutralDouble BorderDouble SuccessRoundedThick Success

1<div class="flex flex-wrap gap-4 justify-center items-center bg-gray-50 p-6 dark:bg-gray-900">
2        
3        <!-- {/* 1️⃣ Simple Border Badges with Light Background */} -->
4        <span class="px-3 py-1 text-sm font-semibold border border-blue-500 text-blue-500 dark:text-blue-200 bg-blue-100 dark:bg-blue-900 rounded-lg">Info</span>
5        <span class="px-3 py-1 text-sm font-semibold border border-red-500 text-red-500 dark:text-red-200 bg-red-100 dark:bg-red-900 rounded-lg">Danger</span>
6        <span class="px-3 py-1 text-sm font-semibold border border-green-500 text-green-500  dark:text-green-200 bg-green-100 dark:bg-green-900 rounded-lg">Success</span>
7        <span class="px-3 py-1 text-sm font-semibold border border-yellow-500 text-yellow-500 dark:text-yellow-200 bg-yellow-100 dark:bg-yellow-900 rounded-lg">Warning</span>
8  
9        <!-- {/* 2️⃣ Dashed Border Badges */} -->
10        <span class="px-3 py-1 text-sm font-semibold border-2 border-blue-500 text-blue-500 dark:text-blue-200 bg-blue-100 dark:bg-blue-900 rounded-lg border-dashed">Dashed Info</span>

Pill Badges

Pill-shaped badges feature smooth, rounded edges, giving a modern and soft look. These are ideal for user status indicators, category labels, or subtle highlights in UI components.

InfoDangerSuccessWarningIndigoPurplePinkNeutralTealOrange

1<div class="flex flex-wrap gap-4  p-10 justify-center items-center bg-gray-50 dark:bg-gray-900">
2      <!-- {/* 🔹 1️⃣ Solid Pill Badges */} -->
3      <span class="px-4 py-1 text-sm font-semibold text-blue-700 dark:text-blue-200 bg-blue-100 dark:bg-blue-900 rounded-full">
4        Info
5      </span>
6      <span class="px-4 py-1 text-sm font-semibold text-red-700 dark:text-red-200 bg-red-100 dark:bg-red-900 rounded-full">
7        Danger
8      </span>
9      <span class="px-4 py-1 text-sm font-semibold text-green-700 dark:text-green-200 bg-green-100 dark:bg-green-900 rounded-full">
10        Success

Link Badges

Link badges act as interactive elements, allowing users to navigate or take actions. These badges are perfect for showing counts, links to user profiles, or interactive navigation.

Info Danger Success Warning Indigo Purple Pink Neutral Teal Orange

1<div class="flex flex-wrap items-center justify-center gap-4 bg-gray-50 p-6 dark:bg-gray-900">
2  <!-- {/* 🔹 1️⃣ Primary Link Badges */} -->
3  <a href="#" class="rounded-lg border border-blue-500 bg-blue-100 px-4 py-1 text-sm font-semibold text-blue-600 transition-all hover:bg-blue-200 hover:text-blue-700 dark:bg-blue-900 dark:text-blue-200 dark:hover:bg-blue-800 dark:hover:text-blue-200"> Info </a>
4  <a href="#" class="rounded-lg border border-red-500 bg-red-100 px-4 py-1 text-sm font-semibold text-red-600 transition-all hover:bg-red-200 hover:text-red-700 dark:bg-red-900 dark:text-red-200 dark:hover:bg-red-800 dark:hover:text-red-200"> Danger </a>
5  <a href="#" class="rounded-lg border border-green-500 bg-green-100 px-4 py-1 text-sm font-semibold text-green-600 transition-all hover:bg-green-200 hover:text-green-700 dark:bg-green-900 dark:text-green-200 dark:hover:bg-green-800 dark:hover:text-green-200"> Success </a>
6  <a href="#" class="rounded-lg border border-yellow-500 bg-yellow-100 px-4 py-1 text-sm font-semibold text-yellow-600 transition-all hover:bg-yellow-200 hover:text-yellow-700 dark:bg-yellow-900 dark:text-yellow-200 dark:hover:bg-yellow-800 dark:hover:text-yellow-200"> Warning </a>
7
8  <!-- {/* 🔹 2️⃣ Secondary Link Badges */} -->
9  <a href="#" class="rounded-lg border border-indigo-500 bg-indigo-100 px-4 py-1 text-sm font-semibold text-indigo-600 transition-all hover:bg-indigo-200 hover:text-indigo-700 dark:bg-indigo-900 dark:text-indigo-200 dark:hover:bg-indigo-800 dark:hover:text-indigo-200"> Indigo </a>
10  <a href="#" class="rounded-lg border border-purple-500 bg-purple-100 px-4 py-1 text-sm font-semibold text-purple-600 transition-all hover:bg-purple-200 hover:text-purple-700 dark:bg-purple-900 dark:text-purple-200 dark:hover:bg-purple-800 dark:hover:text-purple-200"> Purple </a>

Icon Badges

Icon badges replace text with meaningful icons, providing a compact yet effective visual representation. These are great for UI elements like profile verifications, status icons, or feature indicators.

2 Min Away5 Miles AwayHigh PriorityActive NowDownloaded 1.2K Times

1<div class="flex flex-wrap items-center justify-center gap-4 bg-gray-50 p-6 dark:bg-gray-900">
2  <!-- {/* 🔹 1️⃣ Primary Link Badges */} -->
3  <a href="#" class="rounded-lg border border-blue-500 bg-blue-100 px-4 py-1 text-sm font-semibold text-blue-600 transition-all hover:bg-blue-200 hover:text-blue-700 dark:bg-blue-900 dark:text-blue-200 dark:hover:bg-blue-800 dark:hover:text-blue-200"> Info </a>
4  <a href="#" class="rounded-lg border border-red-500 bg-red-100 px-4 py-1 text-sm font-semibold text-red-600 transition-all hover:bg-red-200 hover:text-red-700 dark:bg-red-900 dark:text-red-200 dark:hover:bg-red-800 dark:hover:text-red-200"> Danger </a>
5  <a href="#" class="rounded-lg border border-green-500 bg-green-100 px-4 py-1 text-sm font-semibold text-green-600 transition-all hover:bg-green-200 hover:text-green-700 dark:bg-green-900 dark:text-green-200 dark:hover:bg-green-800 dark:hover:text-green-200"> Success </a>
6  <a href="#" class="rounded-lg border border-yellow-500 bg-yellow-100 px-4 py-1 text-sm font-semibold text-yellow-600 transition-all hover:bg-yellow-200 hover:text-yellow-700 dark:bg-yellow-900 dark:text-yellow-200 dark:hover:bg-yellow-800 dark:hover:text-yellow-200"> Warning </a>
7
8  <!-- {/* 🔹 2️⃣ Secondary Link Badges */} -->
9  <a href="#" class="rounded-lg border border-indigo-500 bg-indigo-100 px-4 py-1 text-sm font-semibold text-indigo-600 transition-all hover:bg-indigo-200 hover:text-indigo-700 dark:bg-indigo-900 dark:text-indigo-200 dark:hover:bg-indigo-800 dark:hover:text-indigo-200"> Indigo </a>
10  <a href="#" class="rounded-lg border border-purple-500 bg-purple-100 px-4 py-1 text-sm font-semibold text-purple-600 transition-all hover:bg-purple-200 hover:text-purple-700 dark:bg-purple-900 dark:text-purple-200 dark:hover:bg-purple-800 dark:hover:text-purple-200"> Purple </a>

Notification Badges

Notification badges are dynamic indicators that alert users about new messages, notifications, or updates. These work great for social media apps, messaging platforms, and dashboards.

99+

1<div class="flex flex-wrap items-center justify-center gap-6 bg-gray-50 p-6 dark:bg-gray-900">
2  <!-- {/* 1️⃣ WhatsApp Message Badge */} -->
3  <div class="relative">
4    <div class="flex h-14 w-14 items-center justify-center rounded-lg bg-green-500">
5      <svg class="h-8 w-8 text-white" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
6        <path strokeLinecap="round" strokeLinejoin="round" d="M3 10l9 9m0 0l9-9m-9 9V3"></path>
7      </svg>
8    </div>
9    <span class="absolute -top-1 -right-1 flex h-7 w-7 items-center justify-center rounded-full border-2 border-white bg-red-500 text-xs font-bold text-white dark:border-gray-900"> 4 </span>
10  </div>

Badges with Icons Only

These badges consist only of icons, making them lightweight and easy to use in compact spaces. Ideal for system statuses, alerts, or simple UI enhancements without additional text.

1<div class="flex flex-wrap gap-6 justify-center items-center bg-gray-50 p-6 dark:bg-gray-900">
2      <!-- {/* 1️⃣ Email Notification Badge */} -->
3      <span class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900">
4        <svg
5          class="w-6 h-6 text-blue-600 dark:text-blue-300"
6          aria-hidden="true"
7          xmlns="http://www.w3.org/2000/svg"
8          fill="currentColor"
9          viewBox="0 0 20 16"
10        >

Button with Badge

Button badges add interactive elements to buttons by displaying real-time notifications, action counts, or event alerts. Commonly used in chat, cart, or social media features.

1<div class="flex flex-wrap items-center justify-center gap-4 bg-gray-50 p-6 dark:bg-gray-900">
2  <!-- Button 1: Messages -->
3  <button class="relative flex items-center gap-2 rounded-lg border border-blue-500 bg-blue-100 px-4 py-2 text-sm font-semibold text-blue-600 transition-all hover:bg-blue-200 hover:text-blue-700 dark:bg-blue-900 dark:text-blue-200 dark:hover:bg-blue-800 dark:hover:text-blue-200">
4    Messages
5    <span class="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 text-xs text-white">6</span>
6  </button>
7
8  <!-- Button 2: Notifications -->
9  <button class="relative flex items-center gap-2 rounded-lg border border-red-500 bg-red-100 px-4 py-2 text-sm font-semibold text-red-600 transition-all hover:bg-red-200 hover:text-red-700 dark:bg-red-900 dark:text-red-200 dark:hover:bg-red-800 dark:hover:text-red-200">
10    Notifications

Closable Badges

Closable badges allow users to remove or dismiss labels dynamically. Useful for filtering systems, tag removals, or custom user interactions in a UI.

Info

Danger

Success

Warning

Indigo

Purple

Pink

Neutral

Teal

Orange

1<div class="flex flex-wrap gap-4 p-10 justify-center items-center bg-gray-50 dark:bg-gray-900">
2  <!-- Chip 1 -->
3  <div class="flex items-center gap-2 px-4 py-1 text-sm font-semibold text-blue-700 dark:text-blue-200 bg-blue-100 dark:bg-blue-900 rounded-full">
4    Info
5    <button class="text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100 focus:outline-none" onclick="this.parentElement.remove()">×</button>
6  </div>
7
8  <!-- Chip 2 -->
9  <div class="flex items-center gap-2 px-4 py-1 text-sm font-semibold text-red-700 dark:text-red-200 bg-red-100 dark:bg-red-900 rounded-lg">
10    Danger

Alerts Button