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-1 text-white
                                          text-sm font-medium rounded-md inline-block whitespace-nowrap text-center">Badge</span>
                                    <span class="bg-gray-500 px-2 py-1 text-white text-sm
                                          font-medium rounded-md inline-block whitespace-nowrap text-center">Badge</span>
                                    <span class="bg-teal-500 px-2 py-1 text-white text-sm
                                          font-medium rounded-md inline-block whitespace-nowrap text-center">Badge</span>
                                    <span class="bg-blue-500 px-2 py-1 text-white text-sm
                                          font-medium rounded-md inline-block whitespace-nowrap text-center">Badge</span>
                                    <span class="bg-red-500 px-2 py-1 text-white text-sm
                                          font-medium rounded-md inline-block whitespace-nowrap text-center">Badge</span>
                                    <span class="bg-yellow-500 px-2 py-1 text-white
                                          text-sm font-medium rounded-md inline-block whitespace-nowrap text-center">Badge</span>
                                    <span class="bg-gray-800 px-2 py-1 text-white text-sm
                                          font-medium rounded-md inline-block whitespace-nowrap text-center">Badge</span>
                                    <span class="bg-gray-300 px-2 py-1 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-1 text-white
                                          text-sm font-medium rounded-full inline-block whitespace-nowrap
                                          text-center">Badge</span>
                                    <span class="bg-gray-500 px-2 py-1 text-white text-sm
                                          font-medium rounded-full inline-block whitespace-nowrap text-center">Badge</span>
                                    <span class="bg-teal-500 px-2 py-1 text-white text-sm
                                          font-medium rounded-full inline-block whitespace-nowrap text-center">Badge</span>
                                    <span class="bg-blue-500 px-2 py-1 text-white text-sm
                                          font-medium rounded-full inline-block whitespace-nowrap text-center">Badge</span>
                                    <span class="bg-red-500 px-2 py-1 text-white text-sm
                                          font-medium rounded-full inline-block whitespace-nowrap text-center">Badge</span>
                                    <span class="bg-yellow-500 px-2 py-1 text-white
                                          text-sm font-medium rounded-full inline-block whitespace-nowrap
                                          text-center">Badge</span>
                                    <span class="bg-gray-800 px-2 py-1 text-white text-sm
                                          font-medium rounded-full inline-block whitespace-nowrap text-center">Badge</span>
                                    <span class="bg-gray-300 px-2 py-1 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-200 px-2 py-1 text-indigo-700
                                          text-sm font-medium rounded-md inline-block whitespace-nowrap text-center">Badge</span>
                                    <span class="bg-gray-200 px-2 py-1 text-gray-700
                                          text-sm font-medium rounded-md inline-block whitespace-nowrap text-center">Badge</span>
                                    <span class="bg-teal-200 px-2 py-1 text-teal-700
                                          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-200 px-2 py-1 text-red-700 text-sm
                                          font-medium rounded-md inline-block whitespace-nowrap text-center">Badge</span>
                                    <span class="bg-yellow-200 px-2 py-1 text-yellow-700
                                          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-200 px-2 py-1 text-gray-700
                                          text-sm font-medium rounded-md inline-block whitespace-nowrap text-center">Badge</span>
Buy Pro