Badge

A visual indicator for a value or status descriptor for UI elements.

Solid color variants

The default form of solid color badges.

Badge Badge Badge Badge Badge Badge Badge Badge

	<span class="bg-indigo-600 px-2 py-px text-white text-sm font-medium rounded-md inline-block whitespace-nowrap text-center">Badge</span>
<span class="bg-gray-500 px-2 py-px text-white text-sm font-medium rounded-md inline-block whitespace-nowrap text-center">Badge</span>
<span class="bg-teal-500 px-2 py-px text-white text-sm font-medium rounded-md inline-block whitespace-nowrap text-center">Badge</span>
<span class="bg-blue-500 px-2 py-px text-white text-sm font-medium rounded-md inline-block whitespace-nowrap text-center">Badge</span>
<span class="bg-red-500 px-2 py-px text-white text-sm font-medium rounded-md inline-block whitespace-nowrap text-center">Badge</span>
<span class="bg-yellow-500 px-2 py-px text-white text-sm font-medium rounded-md inline-block whitespace-nowrap text-center">Badge</span>
<span class="bg-gray-800 px-2 py-px text-white text-sm font-medium rounded-md inline-block whitespace-nowrap text-center">Badge</span>
<span class="bg-gray-300 px-2 py-px text-white text-sm font-medium rounded-md inline-block whitespace-nowrap text-center">Badge</span>

Rounded Solid color variants

The default form of solid color badges With Rounded.

Badge Badge Badge Badge Badge Badge Badge Badge

	<span class="bg-indigo-600 px-2 py-px text-white text-sm font-medium rounded-full inline-block whitespace-nowrap text-center">Badge</span>
<span class="bg-gray-500 px-2 py-px text-white text-sm font-medium rounded-full inline-block whitespace-nowrap text-center">Badge</span>
<span class="bg-teal-500 px-2 py-px text-white text-sm font-medium rounded-full inline-block whitespace-nowrap text-center">Badge</span>
<span class="bg-blue-500 px-2 py-px text-white text-sm font-medium rounded-full inline-block whitespace-nowrap text-center">Badge</span>
<span class="bg-red-500 px-2 py-px text-white text-sm font-medium rounded-full inline-block whitespace-nowrap text-center">Badge</span>
<span class="bg-yellow-500 px-2 py-px text-white text-sm font-medium rounded-full inline-block whitespace-nowrap text-center">Badge</span>
<span class="bg-gray-800 px-2 py-px text-white text-sm font-medium rounded-full inline-block whitespace-nowrap text-center">Badge</span>
<span class="bg-gray-300 px-2 py-px text-white text-sm font-medium rounded-full inline-block whitespace-nowrap text-center">Badge</span>

Soft color variants

The default form of soft color badges.

Badge Badge Badge Badge Badge Badge Badge Badge

<span class="bg-indigo-100 px-2 py-1 text-indigo-900 text-sm font-medium rounded-md inline-block whitespace-nowrap text-center">Badge</span>
<span class="bg-gray-100 px-2 py-1 text-gray-900 text-sm font-medium rounded-md inline-block whitespace-nowrap text-center">Badge</span>
<span class="bg-teal-100 px-2 py-1 text-teal-900 text-sm font-medium rounded-md inline-block whitespace-nowrap text-center">Badge</span>
<span class="bg-blue-200 px-2 py-1 text-blue-700 text-sm font-medium rounded-md inline-block whitespace-nowrap text-center">Badge</span>
<span class="bg-red-100 px-2 py-1 text-red-900 text-sm font-medium rounded-md inline-block whitespace-nowrap text-center">Badge</span>
<span class="bg-yellow-100 px-2 py-1 text-yellow-900 text-sm font-medium rounded-md inline-block whitespace-nowrap text-center">Badge</span>
<span class="bg-gray-300 px-2 py-1 text-gray-900 text-sm font-medium rounded-md inline-block whitespace-nowrap text-center">Badge</span>
<span class="bg-gray-100 px-2 py-1 text-gray-900 text-sm font-medium rounded-md inline-block whitespace-nowrap text-center">Badge</span>