Skip to content
Early Access

Badge

Badges are small components that can be used to display a status or a count.

Basic Badge

PreviewCode
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-slate-800 bg-slate-100 false">
  <span class="whitespace-nowrap">Badge</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-md text-slate-800 bg-slate-100 false">
  <span class="whitespace-nowrap">Badge</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-slate-800 false ring-1 ring-inset ring-slate-900/10">
  <span class="whitespace-nowrap">Badge</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-md text-slate-800 false ring-1 ring-inset ring-slate-900/10">
  <span class="whitespace-nowrap">Badge</span>
</span>
BadgeBadgeBadgeBadge

Colors

PreviewCode
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-slate-800 bg-slate-100 false">
  <span class="whitespace-nowrap">Default</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-blue-800 bg-blue-100 false">
  <span class="whitespace-nowrap">Blue</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-red-800 bg-red-100 false">
  <span class="whitespace-nowrap">Red</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-indigo-800 bg-indigo-100 false">
  <span class="whitespace-nowrap">Indigo</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-purple-800 bg-purple-100 false">
  <span class="whitespace-nowrap">Purple</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-pink-800 bg-pink-100 false">
  <span class="whitespace-nowrap">Pink</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-orange-800 bg-orange-100 false">
  <span class="whitespace-nowrap">Orange</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-teal-800 bg-teal-100 false">
  <span class="whitespace-nowrap">Teal</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-cyan-800 bg-cyan-100 false">
  <span class="whitespace-nowrap">Cyan</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-lime-800 bg-lime-100 false">
  <span class="whitespace-nowrap">Lime</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-emerald-800 bg-emerald-100 false">
  <span class="whitespace-nowrap">Emerald</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-amber-800 bg-amber-100 false">
  <span class="whitespace-nowrap">Amber</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-rose-800 bg-rose-100 false">
  <span class="whitespace-nowrap">Rose</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-fuchsia-800 bg-fuchsia-100 false">
  <span class="whitespace-nowrap">Fuchsia</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-violet-800 bg-violet-100 false">
  <span class="whitespace-nowrap">Violet</span>
</span>
DefaultBlueRedIndigoPurplePinkOrangeTealCyanLimeEmeraldAmberRoseFuchsiaViolet

With Dot

PreviewCode
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-slate-800 bg-slate-100 false">
  <span class="-ml-0.5 h-1.5 w-1.5 shrink-0 rounded-full bg-slate-500">
  </span>
  <span class="whitespace-nowrap">Default</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-blue-800 bg-blue-100 false">
  <span class="-ml-0.5 h-1.5 w-1.5 shrink-0 rounded-full bg-blue-500">
  </span>
  <span class="whitespace-nowrap">Blue</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-red-800 bg-red-100 false">
  <span class="-ml-0.5 h-1.5 w-1.5 shrink-0 rounded-full bg-red-500">
  </span>
  <span class="whitespace-nowrap">Red</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-emerald-800 bg-emerald-100 false">
  <span class="-ml-0.5 h-1.5 w-1.5 shrink-0 rounded-full bg-emerald-500">
  </span>
  <span class="whitespace-nowrap">Emerald</span>
</span>
DefaultBlueRedEmerald

With Close

PreviewCode
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-slate-800 bg-slate-100 false">
  <span class="whitespace-nowrap">Default</span>
  <button type="button" class="group -mr-0.5 ml-1 shrink-0 rounded-full">
    <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 stroke-current group-hover:stroke-black">
      <path d="M19 5 5 19M5 5l14 14">
      </path>
    </svg>
  </button>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-blue-800 bg-blue-100 false">
  <span class="whitespace-nowrap">Blue</span>
  <button type="button" class="group -mr-0.5 ml-1 shrink-0 rounded-full">
    <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 stroke-current group-hover:stroke-black">
      <path d="M19 5 5 19M5 5l14 14">
      </path>
    </svg>
  </button>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-red-800 bg-red-100 false">
  <span class="whitespace-nowrap">Red</span>
  <button type="button" class="group -mr-0.5 ml-1 shrink-0 rounded-full">
    <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 stroke-current group-hover:stroke-black">
      <path d="M19 5 5 19M5 5l14 14">
      </path>
    </svg>
  </button>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-emerald-800 bg-emerald-100 false">
  <span class="whitespace-nowrap">Emerald</span>
  <button type="button" class="group -mr-0.5 ml-1 shrink-0 rounded-full">
    <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 stroke-current group-hover:stroke-black">
      <path d="M19 5 5 19M5 5l14 14">
      </path>
    </svg>
  </button>
</span>
DefaultBlueRedEmerald

Bordered Colors

PreviewCode
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-slate-800 false ring-1 ring-inset ring-slate-900/10">
  <span class="whitespace-nowrap">Default</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-blue-800 false ring-1 ring-inset ring-blue-900/10">
  <span class="whitespace-nowrap">Blue</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-red-800 false ring-1 ring-inset ring-red-900/10">
  <span class="whitespace-nowrap">Red</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-indigo-800 false ring-1 ring-inset ring-indigo-900/10">
  <span class="whitespace-nowrap">Indigo</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-purple-800 false ring-1 ring-inset ring-purple-900/10">
  <span class="whitespace-nowrap">Purple</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-pink-800 false ring-1 ring-inset ring-pink-900/10">
  <span class="whitespace-nowrap">Pink</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-orange-800 false ring-1 ring-inset ring-orange-900/10">
  <span class="whitespace-nowrap">Orange</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-teal-800 false ring-1 ring-inset ring-teal-900/10">
  <span class="whitespace-nowrap">Teal</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-cyan-800 false ring-1 ring-inset ring-cyan-900/10">
  <span class="whitespace-nowrap">Cyan</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-lime-800 false ring-1 ring-inset ring-lime-900/10">
  <span class="whitespace-nowrap">Lime</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-emerald-800 false ring-1 ring-inset ring-emerald-900/10">
  <span class="whitespace-nowrap">Emerald</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-amber-800 false ring-1 ring-inset ring-amber-900/10">
  <span class="whitespace-nowrap">Amber</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-rose-800 false ring-1 ring-inset ring-rose-900/10">
  <span class="whitespace-nowrap">Rose</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-fuchsia-800 false ring-1 ring-inset ring-fuchsia-900/10">
  <span class="whitespace-nowrap">Fuchsia</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-violet-800 false ring-1 ring-inset ring-violet-900/10">
  <span class="whitespace-nowrap">Violet</span>
</span>
DefaultBlueRedIndigoPurplePinkOrangeTealCyanLimeEmeraldAmberRoseFuchsiaViolet

Dot / Bordered

PreviewCode
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-slate-800 false ring-1 ring-inset ring-slate-900/10">
  <span class="-ml-0.5 h-1.5 w-1.5 shrink-0 rounded-full bg-slate-500">
  </span>
  <span class="whitespace-nowrap">Default</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-blue-800 false ring-1 ring-inset ring-blue-900/10">
  <span class="-ml-0.5 h-1.5 w-1.5 shrink-0 rounded-full bg-blue-500">
  </span>
  <span class="whitespace-nowrap">Blue</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-red-800 false ring-1 ring-inset ring-red-900/10">
  <span class="-ml-0.5 h-1.5 w-1.5 shrink-0 rounded-full bg-red-500">
  </span>
  <span class="whitespace-nowrap">Red</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-emerald-800 false ring-1 ring-inset ring-emerald-900/10">
  <span class="-ml-0.5 h-1.5 w-1.5 shrink-0 rounded-full bg-emerald-500">
  </span>
  <span class="whitespace-nowrap">Emerald</span>
</span>
DefaultBlueRedEmerald

Close / Bordered

PreviewCode
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-slate-800 false ring-1 ring-inset ring-slate-900/10">
  <span class="whitespace-nowrap">Default</span>
  <button type="button" class="group -mr-0.5 ml-1 shrink-0 rounded-full">
    <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 stroke-current group-hover:stroke-black">
      <path d="M19 5 5 19M5 5l14 14">
      </path>
    </svg>
  </button>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-blue-800 false ring-1 ring-inset ring-blue-900/10">
  <span class="whitespace-nowrap">Blue</span>
  <button type="button" class="group -mr-0.5 ml-1 shrink-0 rounded-full">
    <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 stroke-current group-hover:stroke-black">
      <path d="M19 5 5 19M5 5l14 14">
      </path>
    </svg>
  </button>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-red-800 false ring-1 ring-inset ring-red-900/10">
  <span class="whitespace-nowrap">Red</span>
  <button type="button" class="group -mr-0.5 ml-1 shrink-0 rounded-full">
    <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 stroke-current group-hover:stroke-black">
      <path d="M19 5 5 19M5 5l14 14">
      </path>
    </svg>
  </button>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-emerald-800 false ring-1 ring-inset ring-emerald-900/10">
  <span class="whitespace-nowrap">Emerald</span>
  <button type="button" class="group -mr-0.5 ml-1 shrink-0 rounded-full">
    <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 stroke-current group-hover:stroke-black">
      <path d="M19 5 5 19M5 5l14 14">
      </path>
    </svg>
  </button>
</span>
DefaultBlueRedEmerald

Sizes

PreviewCode
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-1 py-px rounded-full text-slate-800 bg-slate-100 false">
  <span class="whitespace-nowrap">Badge</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xs font-medium px-3 py-1 rounded-full text-slate-800 bg-slate-100 false">
  <span class="whitespace-nowrap">Badge</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-sm font-semibold px-3 py-1 rounded-full text-slate-800 bg-slate-100 false">
  <span class="whitespace-nowrap">Badge</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-sm font-semibold px-3 py-1.5 rounded-full text-slate-800 bg-slate-100 false">
  <span class="whitespace-nowrap">Badge</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-base font-semibold px-3 py-1.5 rounded-full text-slate-800 bg-slate-100 false">
  <span class="whitespace-nowrap">Badge</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-lg font-semibold px-3 py-1.5 rounded-full text-slate-800 bg-slate-100 false">
  <span class="whitespace-nowrap">Badge</span>
</span>
<span class="flex shrink-0 items-center space-x-1.5 text-xl font-semibold px-3 py-1.5 rounded-full text-slate-800 bg-slate-100 false">
  <span class="whitespace-nowrap">Badge</span>
</span>
BadgeBadgeBadgeBadgeBadgeBadgeBadge

Only Dot

PreviewCode
<span class="h-2 w-2 shrink-0 rounded-full bg-slate-500">
</span>
<span class="h-2 w-2 shrink-0 rounded-full bg-emerald-500">
</span>
<span class="h-2 w-2 shrink-0 rounded-full bg-red-500">
</span>
<span class="relative flex h-2 w-2">
  <span class="absolute h-full w-full shrink-0 animate-ping rounded-full bg-blue-500">
  </span>
  <span class="h-full w-full shrink-0 rounded-full bg-blue-500">
  </span>
</span>
<span class="h-2 w-2 shrink-0 rounded-full bg-yellow-500">
</span>