Playground

Badge

A badge element used to highlight new or updated content, indicate status, or convey additional information.

Tailwind Only
Copied!
Badge 
<span class="rounded-full px-2.5 py-0.5 text-white text-xs font-semibold bg-black">
    Badge
</span>

Data

Below you will find the data properties available in the x-data attribute of this element.

This particular element does not contain any data, It holds within it only TailwindCSS classes. Ah, but fear not! Should you so desire, you have the power to infuse it with some dynamic magic. Simply add the `x-data` attribute and create your desired functionality.

More Examples

Below you will find more Badge examples you may wish to use in your projects.

Copied!
Badge Badge Badge Badge Badge Badge Badge Badge 
<span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded-full">Badge</span>
<span class="bg-gray-100 text-gray-800 text-xs font-semibold px-2.5 py-0.5 rounded-full">Badge</span>
<span class="bg-red-100 text-red-800 text-xs font-semibold px-2.5 py-0.5 rounded-full">Badge</span>
<span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded-full">Badge</span>
<span class="bg-yellow-100 text-yellow-800 text-xs font-semibold px-2.5 py-0.5 rounded-full">Badge</span>
<span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded-full">Badge</span>
<span class="bg-purple-100 text-purple-800 text-xs font-semibold px-2.5 py-0.5 rounded-full">Badge</span>
<span class="bg-pink-100 text-pink-800 text-xs font-semibold px-2.5 py-0.5 rounded-full">Badge</span>
Copied!
Badge Badge Badge Badge Badge Badge Badge Badge 
<span class="bg-transparent text-blue-500 border border-blue-500 text-xs font-semibold px-2.5 py-0.5 rounded-full">Badge</span>
<span class="bg-transparent text-gray-500 border border-gray-500 text-xs font-semibold px-2.5 py-0.5 rounded-full">Badge</span>
<span class="bg-transparent text-red-500 border border-red-500 text-xs font-semibold px-2.5 py-0.5 rounded-full">Badge</span>
<span class="bg-transparent text-green-500 border border-green-500 text-xs font-semibold px-2.5 py-0.5 rounded-full">Badge</span>
<span class="bg-transparent text-yellow-500 border border-yellow-500 text-xs font-semibold px-2.5 py-0.5 rounded-full">Badge</span>
<span class="bg-transparent text-indigo-500 border border-indigo-500 text-xs font-semibold px-2.5 py-0.5 rounded-full">Badge</span>
<span class="bg-transparent text-purple-500 border border-purple-500 text-xs font-semibold px-2.5 py-0.5 rounded-full">Badge</span>
<span class="bg-transparent text-pink-500 border border-pink-500 text-xs font-semibold px-2.5 py-0.5 rounded-full">Badge</span>
Copied!
Badge Badge Badge Badge Badge Badge Badge Badge 
<span class="bg-transparent text-blue-500 border border-neutral-300 flex items-center text-xs font-semibold px-2.5 py-0.5 rounded-full">
    <span class="block w-1.5 h-1.5 -ml-0.5 mr-1 bg-blue-500 rounded-full"></span>
    <span>Badge</span>
</span>
<span class="bg-transparent text-gray-500 border border-neutral-300 flex items-center text-xs font-semibold px-2.5 py-0.5 rounded-full">
    <span class="block w-1.5 h-1.5 -ml-0.5 mr-1 bg-gray-500 rounded-full"></span>
    <span>Badge</span>
</span>
<span class="bg-transparent text-red-500 border border-neutral-300 flex items-center text-xs font-semibold px-2.5 py-0.5 rounded-full">
    <span class="block w-1.5 h-1.5 -ml-0.5 mr-1 bg-red-500 rounded-full"></span>
    <span>Badge</span>
</span>
<span class="bg-transparent text-green-500 border border-neutral-300 flex items-center text-xs font-semibold px-2.5 py-0.5 rounded-full">
    <span class="block w-1.5 h-1.5 -ml-0.5 mr-1 bg-green-500 rounded-full"></span>
    <span>Badge</span>
</span>
<span class="bg-transparent text-yellow-500 border border-neutral-300 flex items-center text-xs font-semibold px-2.5 py-0.5 rounded-full">
    <span class="block w-1.5 h-1.5 -ml-0.5 mr-1 bg-yellow-500 rounded-full"></span>
    <span>Badge</span>
</span>
<span class="bg-transparent text-indigo-500 border border-neutral-300 flex items-center text-xs font-semibold px-2.5 py-0.5 rounded-full">
    <span class="block w-1.5 h-1.5 -ml-0.5 mr-1 bg-indigo-500 rounded-full"></span>
    <span>Badge</span>
</span>
<span class="bg-transparent text-purple-500 border border-neutral-300 flex items-center text-xs font-semibold px-2.5 py-0.5 rounded-full">
    <span class="block w-1.5 h-1.5 -ml-0.5 mr-1 bg-purple-500 rounded-full"></span>
    <span>Badge</span>
</span>
<span class="bg-transparent text-pink-500 border border-neutral-300 flex items-center text-xs font-semibold px-2.5 py-0.5 rounded-full">
    <span class="block w-1.5 h-1.5 -ml-0.5 mr-1 bg-pink-500 rounded-full"></span>
    <span>Badge</span>
</span>
Copied!
Badge Badge Badge Badge Badge Badge 

<span class="bg-blue-600 text-white relative flex items-center text-xs font-semibold pl-2 pr-2.5 py-1 rounded-full">
    <svg class="relative w-3.5 h-3.5 -translate-x-0.5 opacity-90" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd" /></svg>
    <span>Badge</span>
</span>
<span class="bg-red-600 text-white relative flex items-center text-xs font-semibold pl-2 pr-2.5 py-1 rounded-full">
    <svg class="relative w-3.5 h-3.5 -translate-x-0.5 opacity-90" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-1.72 6.97a.75.75 0 10-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 101.06 1.06L12 13.06l1.72 1.72a.75.75 0 101.06-1.06L13.06 12l1.72-1.72a.75.75 0 10-1.06-1.06L12 10.94l-1.72-1.72z" clip-rule="evenodd" /></svg>
    <span>Badge</span>
</span>
<span class="bg-green-600 text-white relative flex items-center text-xs font-semibold pl-2 pr-2.5 py-1 rounded-full">
    <svg class="relative w-3.5 h-3.5 -translate-x-0.5 opacity-90"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" /></svg>
    <span>Badge</span>
</span>
<span class="bg-amber-600 text-white relative flex items-center text-xs font-semibold pl-2 pr-2.5 py-1 rounded-full">
    <svg class="relative w-3.5 h-3.5 -translate-x-0.5 opacity-90" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd" /></svg>
    <span>Badge</span>
</span>
<span class="bg-indigo-600 text-white relative flex items-center text-xs font-semibold pl-2 pr-2.5 py-1 rounded-full">
    <svg class="relative w-3.5 h-3.5 -translate-x-0.5 opacity-90" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm11.378-3.917c-.89-.777-2.366-.777-3.255 0a.75.75 0 01-.988-1.129c1.454-1.272 3.776-1.272 5.23 0 1.513 1.324 1.513 3.518 0 4.842a3.75 3.75 0 01-.837.552c-.676.328-1.028.774-1.028 1.152v.75a.75.75 0 01-1.5 0v-.75c0-1.279 1.06-2.107 1.875-2.502.182-.088.351-.199.503-.331.83-.727.83-1.857 0-2.584zM12 18a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd" /></svg>
    <span>Badge</span>
</span>
<span class="bg-black text-white relative flex items-center text-xs font-semibold pl-2 pr-2.5 py-1 rounded-full">
    <svg class="relative w-3.5 h-3.5 -translate-x-0.5 opacity-90" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"><path fill-rule="evenodd" d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" clip-rule="evenodd" /></svg>
    <span>Badge</span>
</span>
Alert Banner
A project by DevDojo