Notifications

3 new

Marcus Silva assigned you to Q3 Revenue Report

10 minutes ago

Emma Wilson commented on Homepage Redesign

45 minutes ago

James Miller mentioned you in Sprint Planning

2 hours ago

Sarah Chen uploaded Q2 Analytics Deck

3 hours ago

David Kim requested review on API Integration PR

5 hours ago

View all notifications

Badges

Badge component examples.

Color Variants

Gray Primary Success Warning Danger Purple

<span class="bg-gray-100 text-gray-700 px-2.5 py-0.5 rounded-full text-xs font-medium">Gray</span>
<span class="bg-alpine-100 text-alpine-700 px-2.5 py-0.5 rounded-full text-xs font-medium">Primary</span>
<span class="bg-green-100 text-green-700 px-2.5 py-0.5 rounded-full text-xs font-medium">Success</span>
<span class="bg-yellow-100 text-yellow-700 px-2.5 py-0.5 rounded-full text-xs font-medium">Warning</span>
<span class="bg-red-100 text-red-700 px-2.5 py-0.5 rounded-full text-xs font-medium">Danger</span>
<span class="bg-purple-100 text-purple-700 px-2.5 py-0.5 rounded-full text-xs font-medium">Purple</span>

Filled Badges

Gray Primary Success Warning Danger Purple

<span class="bg-gray-500 text-white px-2.5 py-0.5 rounded-full text-xs font-medium">Gray</span>
<span class="bg-alpine-500 text-white px-2.5 py-0.5 rounded-full text-xs font-medium">Primary</span>
<span class="bg-green-500 text-white px-2.5 py-0.5 rounded-full text-xs font-medium">Success</span>
<span class="bg-yellow-500 text-white px-2.5 py-0.5 rounded-full text-xs font-medium">Warning</span>
<span class="bg-red-500 text-white px-2.5 py-0.5 rounded-full text-xs font-medium">Danger</span>
<span class="bg-purple-500 text-white px-2.5 py-0.5 rounded-full text-xs font-medium">Purple</span>

Sizing

Small Default Large

<span class="bg-alpine-100 text-alpine-700 text-[10px] px-1.5 py-0.5 rounded-full font-medium">Small</span>
<span class="bg-alpine-100 text-alpine-700 text-xs px-2.5 py-0.5 rounded-full font-medium">Default</span>
<span class="bg-alpine-100 text-alpine-700 text-sm px-3 py-1 rounded-full font-medium">Large</span>

Pill Badges

3 5 99 12 7

<span class="w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold bg-red-500 text-white">3</span>
<span class="w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold bg-alpine-500 text-white">5</span>
<span class="w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold bg-red-500 text-white">99</span>
<span class="w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold bg-green-500 text-white">12</span>
<span class="w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold bg-yellow-500 text-white">7</span>

Badge Positions

<div class="relative inline-flex">
  <button class="bg-alpine-500 hover:bg-alpine-600 text-white px-4 py-2.5 rounded-lg text-sm font-medium transition-colors">Messages</button>
  <span class="absolute -top-1 -right-1 w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold bg-red-500 text-white">4</span>
</div>

<div class="relative inline-flex">
  <svg class="w-8 h-8 text-gray-400" ...><!-- notification bell --></svg>
  <span class="absolute -top-1 -right-1 w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold bg-red-500 text-white">3</span>
</div>