Badges

Examples of building badge components used for small counts and labeling


The following badges can be built using utility classes.

# Basic Badges

Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-gray-100 text-gray-800">Badge</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-red-100 text-red-800">Badge</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-orange-100 text-orange-800">Badge</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-yellow-100 text-yellow-800">Badge</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-green-100 text-green-800">Badge</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-teal-100 text-teal-800">Badge</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-blue-100 text-blue-800">Badge</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-violet-100 text-violet-800">Badge</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-violet-100 text-violet-800">Badge</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-pink-100 text-pink-800">Badge</span>

# Large Badges

Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-gray-100 text-gray-800">Badge</span>
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-red-100 text-red-800">Badge</span>
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-orange-100 text-orange-800">Badge</span>
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-yellow-100 text-yellow-800">Badge</span>
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-green-100 text-green-800">Badge</span>
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-teal-100 text-teal-800">Badge</span>
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-blue-100 text-blue-800">Badge</span>
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-violet-100 text-violet-800">Badge</span>
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-violet-100 text-violet-800">Badge</span>
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-pink-100 text-pink-800">Badge</span>

# Badges with dot

Small
Large
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-violet-100 text-violet-800">
<svg class="icon icon--circle-medium -ml-0.5 mr-0.5 icon-xs text-violet-400" role="img" fill="currentColor" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-circle-medium"></use></svg>
Small
</span>
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-violet-100 text-violet-800">
<svg class="icon icon--circle-medium -ml-0.5 mr-0.5 icon-xs text-violet-400" role="img" fill="currentColor" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-circle-medium"></use></svg>
Large
</span>

# Badge with remove button

Small
Large
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-violet-100 text-violet-800">
Small
<button type="button" class="flex-shrink-0 -mr-0.5 ml-0.5 inline-flex text-violet-500 focus:outline-none focus:text-violet-700">
<svg class="icon icon--close icon-xs" role="img" fill="currentColor" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-close"></use></svg>
</button>
</span>
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-violet-100 text-violet-800">
Large
<button type="button" class="flex-shrink-0 -mr-0.5 ml-0.5 inline-flex text-violet-500 focus:outline-none focus:text-violet-700">
<svg class="icon icon--close icon-xs" role="img" fill="currentColor" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-close"></use></svg>
</button>
</span>