Badges

Documentation and examples for badges, our small count and labeling component.

Example

Example badge for heading element.

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
			                
			                  <h1 class="text-4xl leading-normal mb-2">Example heading <span class="inline-block leading-none text-center py-1 px-2 bg-indigo-500 text-gray-100 font-bold rounded" style="font-size: .75em;">New</span></h1>
			                  <h2 class="text-3xl leading-normal mb-2">Example heading <span class="inline-block leading-none text-center py-1 px-2 bg-indigo-500 text-gray-100 font-bold rounded" style="font-size: .75em;">New</span></h2>
			                  <h3 class="text-2xl leading-normal mb-2">Example heading <span class="inline-block leading-none text-center py-1 px-2 bg-indigo-500 text-gray-100 font-bold rounded" style="font-size: .75em;">New</span></h3>
			                  <h4 class="text-xl leading-normal mb-2">Example heading <span class="inline-block leading-none text-center py-1 px-2 bg-indigo-500 text-gray-100 font-bold rounded" style="font-size: .75em;">New</span></h4>
			                  <h5 class="text-lg leading-normal mb-2">Example heading <span class="inline-block leading-none text-center py-1 px-2 bg-indigo-500 text-gray-100 font-bold rounded" style="font-size: .75em;">New</span></h5>
			                  <h6 class="text-base leading-normal mb-2">Example heading <span class="inline-block leading-none text-center py-1 px-2 bg-indigo-500 text-gray-100 font-bold rounded" style="font-size: .75em;">New</span></h6>
			                
			              

Badge with colors

Primary Danger Warning Success Info Light Dark
			                
			                  <span class="inline-block leading-none text-center py-1 px-2 bg-indigo-500 text-gray-100 font-bold rounded" style="font-size: .75em;">Primary</span>
			                  <span class="inline-block leading-none text-center py-1 px-2 bg-red-700 text-gray-100 font-bold rounded" style="font-size: .75em;">Danger</span>
			                  <span class="inline-block leading-none text-center py-1 px-2 bg-yellow-300 text-gray-900 font-bold rounded" style="font-size: .75em;">Warning</span>
			                  <span class="inline-block leading-none text-center py-1 px-2 bg-green-700 text-gray-100 font-bold rounded" style="font-size: .75em;">Success</span>
			                  <span class="inline-block leading-none text-center py-1 px-2 bg-blue-400 text-gray-900 font-bold rounded" style="font-size: .75em;">Info</span>
			                  <span class="inline-block leading-none text-center py-1 px-2 bg-gray-100 text-gray-900 font-bold rounded" style="font-size: .75em;">Light</span>
			                  <span class="inline-block leading-none text-center py-1 px-2 bg-black text-gray-100 font-bold rounded" style="font-size: .75em;">Dark</span>
			                
			              

Pill Badge with colors

Primary Danger Warning Success Info Light Dark
			                
			                  <span class="inline-block leading-none text-center py-1 px-2 bg-indigo-500 text-gray-100 font-bold rounded-xl" style="font-size: .75em;">Primary</span>
			                  <span class="inline-block leading-none text-center py-1 px-2 bg-red-700 text-gray-100 font-bold rounded-xl" style="font-size: .75em;">Danger</span>
			                  <span class="inline-block leading-none text-center py-1 px-2 bg-yellow-300 text-gray-900 font-bold rounded-xl" style="font-size: .75em;">Warning</span>
			                  <span class="inline-block leading-none text-center py-1 px-2 bg-green-700 text-gray-100 font-bold rounded-xl" style="font-size: .75em;">Success</span>
			                  <span class="inline-block leading-none text-center py-1 px-2 bg-blue-400 text-gray-900 font-bold rounded-xl" style="font-size: .75em;">Info</span>
			                  <span class="inline-block leading-none text-center py-1 px-2 bg-gray-100 text-gray-900 font-bold rounded-xl" style="font-size: .75em;">Light</span>
			                  <span class="inline-block leading-none text-center py-1 px-2 bg-black text-gray-100 font-bold rounded-xl" style="font-size: .75em;">Dark</span>
			                
			              

Badge in button

			                
			                  <a href="#" class="py-3 px-5 -ms-1 rounded leading-5 text-gray-100 bg-indigo-500 border border-indigo-600 hover:text-white hover:bg-indigo-600 hover:ring-0 hover:border-indigo-600 focus:bg-indigo-600 focus:border-indigo-600 focus:outline-none focus:ring-0">
			                    Notifications <span class="ml-2 inline-block leading-none text-center py-1 px-2 bg-gray-100 text-gray-900 font-bold rounded" style="font-size: .75em;">6</span>
			                  </a>