Tailwind CSS Badge & Pill Components
Status pills and notification count badges, each available in 10 design styles. Copy the markup and drop it into any Tailwind project.
22 components · live preview · copy as HTML or JSX · free for commercial use
Base badges (2)
Status Pill
Badges
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-emerald-100 text-emerald-700 text-xs font-semibold">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
Active
</span>Notification Badge
Badges
<span class="relative inline-flex">
<span class="inline-flex items-center justify-center w-9 h-9 rounded-full bg-slate-100 text-slate-500">🔔</span>
<span class="absolute -top-1 -right-1 inline-flex items-center justify-center w-5 h-5 rounded-full bg-rose-500 text-white text-[10px] font-bold">3</span>
</span>Minimal badges
Status Pill
Minimal · Badges
<span class="inline-flex items-center gap-1.5 bg-slate-100 text-slate-700 rounded-full px-2.5 py-1 text-xs font-semibold">
<span class="w-1.5 h-1.5 rounded-full bg-current opacity-70"></span>
Active
</span>Notification Badge
Minimal · Badges
<span class="relative inline-flex">
<span class="inline-flex items-center justify-center w-9 h-9 rounded-full bg-white border border-slate-200 text-slate-500">🔔</span>
<span class="absolute -top-1 -right-1 inline-flex items-center justify-center w-5 h-5 rounded-full bg-slate-100 text-slate-700 text-[10px] font-semibold">3</span>
</span>Neumorphism badges
Status Pill
Neumorphism · Badges
<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
<span class="inline-flex items-center gap-1.5 bg-[#e0e5ec] text-slate-600 rounded-full px-2.5 py-1 text-xs font-bold">
<span class="w-1.5 h-1.5 rounded-full bg-current opacity-70"></span>
Active
</span>
</div>Notification Badge
Neumorphism · Badges
<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
<span class="relative inline-flex">
<span class="inline-flex items-center justify-center w-9 h-9 rounded-full bg-[#e0e5ec] text-slate-500">🔔</span>
<span class="absolute -top-1 -right-1 inline-flex items-center justify-center w-5 h-5 rounded-full bg-[#e0e5ec] text-slate-600 text-[10px] font-bold">3</span>
</span>
</div>Glassmorphism badges
Status Pill
Glassmorphism · Badges
<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
<span class="inline-flex items-center gap-1.5 bg-white/20 backdrop-blur-md text-white rounded-full px-2.5 py-1 text-xs font-bold">
<span class="w-1.5 h-1.5 rounded-full bg-current opacity-70"></span>
Active
</span>
</div>Notification Badge
Glassmorphism · Badges
<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
<span class="relative inline-flex">
<span class="inline-flex items-center justify-center w-9 h-9 rounded-full bg-white/20 backdrop-blur-md border border-white/30 text-white/80">🔔</span>
<span class="absolute -top-1 -right-1 inline-flex items-center justify-center w-5 h-5 rounded-full bg-white/20 backdrop-blur-md text-white text-[10px] font-bold">3</span>
</span>
</div>Neubrutalism badges
Status Pill
Neubrutalism · Badges
<span class="inline-flex items-center gap-1.5 bg-pink-400 text-black rounded-none px-2.5 py-1 text-xs font-black">
<span class="w-1.5 h-1.5 rounded-full bg-current opacity-70"></span>
Active
</span>Notification Badge
Neubrutalism · Badges
<span class="relative inline-flex">
<span class="inline-flex items-center justify-center w-9 h-9 rounded-none bg-white border-[3px] border-black text-slate-700">🔔</span>
<span class="absolute -top-1 -right-1 inline-flex items-center justify-center w-5 h-5 rounded-full bg-pink-400 text-black text-[10px] font-black">3</span>
</span>Material badges
Status Pill
Material · Badges
<span class="inline-flex items-center gap-1.5 bg-blue-100 text-blue-800 rounded-full px-2.5 py-1 text-xs font-medium">
<span class="w-1.5 h-1.5 rounded-full bg-current opacity-70"></span>
Active
</span>Notification Badge
Material · Badges
<span class="relative inline-flex">
<span class="inline-flex items-center justify-center w-9 h-9 rounded-full bg-white text-slate-500">🔔</span>
<span class="absolute -top-1 -right-1 inline-flex items-center justify-center w-5 h-5 rounded-full bg-blue-100 text-blue-800 text-[10px] font-medium">3</span>
</span>Gradient badges
Status Pill
Gradient · Badges
<span class="inline-flex items-center gap-1.5 bg-gradient-to-r from-fuchsia-500 to-indigo-500 text-white rounded-full px-2.5 py-1 text-xs font-bold">
<span class="w-1.5 h-1.5 rounded-full bg-current opacity-70"></span>
Active
</span>Notification Badge
Gradient · Badges
<span class="relative inline-flex">
<span class="inline-flex items-center justify-center w-9 h-9 rounded-full bg-gradient-to-br from-fuchsia-500 via-purple-500 to-indigo-500 text-white/80">🔔</span>
<span class="absolute -top-1 -right-1 inline-flex items-center justify-center w-5 h-5 rounded-full bg-gradient-to-r from-fuchsia-500 to-indigo-500 text-white text-[10px] font-bold">3</span>
</span>Cyberpunk badges
Status Pill
Cyberpunk · Badges
<div class="bg-slate-950 p-6 rounded-xl inline-block">
<span class="inline-flex items-center gap-1.5 bg-slate-900 text-cyan-400 rounded-lg px-2.5 py-1 text-xs font-bold">
<span class="w-1.5 h-1.5 rounded-full bg-current opacity-70"></span>
Active
</span>
</div>Notification Badge
Cyberpunk · Badges
<div class="bg-slate-950 p-6 rounded-xl inline-block">
<span class="relative inline-flex">
<span class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-slate-900 border border-cyan-400 text-cyan-300/70">🔔</span>
<span class="absolute -top-1 -right-1 inline-flex items-center justify-center w-5 h-5 rounded-full bg-slate-900 text-cyan-400 text-[10px] font-bold">3</span>
</span>
</div>Retro badges
Status Pill
Retro · Badges
<span class="inline-flex items-center gap-1.5 bg-gradient-to-b from-yellow-300 to-orange-400 text-slate-900 rounded-full px-2.5 py-1 text-xs font-black">
<span class="w-1.5 h-1.5 rounded-full bg-current opacity-70"></span>
Active
</span>Notification Badge
Retro · Badges
<span class="relative inline-flex">
<span class="inline-flex items-center justify-center w-9 h-9 rounded-full bg-orange-100 border-4 border-orange-400 text-orange-600">🔔</span>
<span class="absolute -top-1 -right-1 inline-flex items-center justify-center w-5 h-5 rounded-full bg-gradient-to-b from-yellow-300 to-orange-400 text-slate-900 text-[10px] font-black">3</span>
</span>Corporate badges
Status Pill
Corporate · Badges
<span class="inline-flex items-center gap-1.5 bg-slate-100 text-slate-600 rounded-md px-2.5 py-1 text-xs font-semibold">
<span class="w-1.5 h-1.5 rounded-full bg-current opacity-70"></span>
Active
</span>Notification Badge
Corporate · Badges
<span class="relative inline-flex">
<span class="inline-flex items-center justify-center w-9 h-9 rounded-md bg-white border border-slate-200 text-slate-500">🔔</span>
<span class="absolute -top-1 -right-1 inline-flex items-center justify-center w-5 h-5 rounded-full bg-slate-100 text-slate-600 text-[10px] font-semibold">3</span>
</span>Playful badges
Status Pill
Playful · Badges
<span class="inline-flex items-center gap-1.5 bg-teal-100 text-teal-800 rounded-full px-2.5 py-1 text-xs font-bold">
<span class="w-1.5 h-1.5 rounded-full bg-current opacity-70"></span>
Active
</span>Notification Badge
Playful · Badges
<span class="relative inline-flex">
<span class="inline-flex items-center justify-center w-9 h-9 rounded-full bg-yellow-50 border-2 border-yellow-200 text-yellow-700">🔔</span>
<span class="absolute -top-1 -right-1 inline-flex items-center justify-center w-5 h-5 rounded-full bg-teal-100 text-teal-800 text-[10px] font-bold">3</span>
</span>When to use badges
Badges are small, non-interactive labels that add context to something else on the screen: a status pill marks an order as Active or Pending, and a notification badge overlays an unread count on an icon. Keep them short — one or two words, or a number — and never make a badge the only place important information appears.
The notification badge uses a relative wrapper with an absolutely positioned counter at -top-1 -right-1. If the count can grow past two digits, show 99+ rather than letting the badge widen and cover the icon.
Accessibility tips
Color alone should not carry meaning, so pair a green or red pill with a clear word such as Paid or Failed. For count badges on icon buttons, include the number in the button's aria-label (for example "Notifications, 3 unread"), because a screen reader may not announce the floating counter in a useful order.
Frequently Asked Questions
What is the difference between a badge and a tag?↓
A badge is a read-only status or count label. A tag or chip is usually interactive — removable, clickable, or used as a filter — so it should be built from a button when users can act on it.
How do I position a notification badge on an icon?↓
Wrap the icon in an element with the relative class, then give the badge absolute -top-1 -right-1. The Notification Badge component on this page shows the full pattern.
Can I use these badges without Tailwind CSS?↓
The markup relies on Tailwind utility classes. Without Tailwind, convert the classes to equivalent CSS rules — the design is simple padding, rounded corners and background colors.
Last updated: