logo Template.Vault

search

CTRL+K or '/'

Contact

Components

badges - Template.Vault

Tailwind CSS badges can serve as versatile elements to display counts or labels, either on their own or embedded within other components like buttons, cards, or menus. With Tailwind’s utility classes, you can quickly customize badges to fit various designs, using different colors, shapes, and placements.

The badge component can enhance elements like buttons or text by displaying labels or data counts, such as comment totals or time since a comment. Badges can also function as standalone links by using an anchor tag instead of a span, linking users directly to a page.

Default badge

Use these badge elements to show counts or labels within or outside components.

See on Github
Pink Green Purple Default Yellow Dark Red Indigo
HTML

    <span class="bg-pink-100 text-pink-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-pink-900 dark:text-pink-300">Pink</span>
    <span class="bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">Green</span>
    <span class="bg-purple-100 text-purple-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-purple-900 dark:text-purple-300">Purple</span>
    <span class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">Default</span>
    <span class="bg-yellow-100 text-yellow-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300">Yellow</span>
    <span class="bg-gray-100 text-gray-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-300">Dark</span>
    <span class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300">Red</span>
    <span class="bg-indigo-100 text-indigo-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-indigo-900 dark:text-indigo-300">Indigo</span>

Bordered badges

Use these bordered badges to indicate counts or labels either within components or on their own.

See on Github
Green Pink Indigo Red Yellow Purple Dark
HTML

    <span class="bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">Green</span>
    <span class="bg-pink-100 text-pink-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-pink-400 border border-pink-400">Pink</span>
    <span class="bg-indigo-100 text-indigo-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-indigo-400 border border-indigo-400">Indigo</span>
    <span class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">Red</span>
    <span class="bg-yellow-100 text-yellow-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-yellow-300 border border-yellow-300">Yellow</span>
    <span class="bg-purple-100 text-purple-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-purple-400 border border-purple-400">Purple</span>
    <span class="bg-gray-100 text-gray-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-400 border border-gray-500">Dark</span>

Rounded badges

Use these rounded badges to display counts or labels as standalone elements or within other components.

See on Github
Purple Indigo Red Green Pink Dark Yellow
HTML

    <span class="bg-purple-100 text-purple-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-purple-900 dark:text-purple-300">Purple</span>
    <span class="bg-indigo-100 text-indigo-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-indigo-900 dark:text-indigo-300">Indigo</span>
    <span class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-red-900 dark:text-red-300">Red</span>
    <span class="bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-green-900 dark:text-green-300">Green</span>
    <span class="bg-pink-100 text-pink-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-pink-900 dark:text-pink-300">Pink</span>
    <span class="bg-gray-100 text-gray-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-gray-700 dark:text-gray-300">Dark</span>
    <span class="bg-yellow-100 text-yellow-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-yellow-900 dark:text-yellow-300">Yellow</span>

Large bordered badges

Increase the padding to create a larger variant of the badges.

See on Github
Green Pink Indigo Red Yellow Purple Dark
HTML

    <span class="bg-green-100 text-green-800 text-xs font-medium me-2 px-5 py-2 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">Green</span>
    <span class="bg-pink-100 text-pink-800 text-xs font-medium me-2 px-5 py-2 rounded dark:bg-gray-700 dark:text-pink-400 border border-pink-400">Pink</span>
    <span class="bg-indigo-100 text-indigo-800 text-xs font-medium me-2 px-5 py-2 rounded dark:bg-gray-700 dark:text-indigo-400 border border-indigo-400">Indigo</span>
    <span class="bg-red-100 text-red-800 text-xs font-medium me-2 px-5 py-2 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">Red</span>
    <span class="bg-yellow-100 text-yellow-800 text-xs font-medium me-2 px-5 py-2 rounded dark:bg-gray-700 dark:text-yellow-300 border border-yellow-300">Yellow</span>
    <span class="bg-purple-100 text-purple-800 text-xs font-medium me-2 px-5 py-2 rounded dark:bg-gray-700 dark:text-purple-400 border border-purple-400">Purple</span>
    <span class="bg-gray-100 text-gray-800 text-xs font-medium me-2 px-5 py-2 rounded dark:bg-gray-700 dark:text-gray-400 border border-gray-500">Dark</span>

Badges with icon

You can incorporate SVG icons within the badge elements.

See on Github
4 minutes ago 5 days ago
HTML

<span class="bg-gray-100 text-gray-800 text-xs font-medium inline-flex items-center px-4 py-1.5 rounded me-2 dark:bg-[#212121] dark:text-white border border-black dark:border-white">
    <svg class="w-2.5 h-2.5 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm3.982 13.982a1 1 0 0 1-1.414 0l-3.274-3.274A1.012 1.012 0 0 1 9 10V6a1 1 0 0 1 2 0v3.586l2.982 2.982a1 1 0 0 1 0 1.414Z"></path></svg>
    4 minutes ago
</span>
<span class="bg-[#ffff46] text-black text-xs font-medium inline-flex items-center px-4 py-1.5 rounded dark:bg-[#212121] dark:text-[#ffff00] border border-black dark:border-[#ffff00]">
    <svg class="w-2.5 h-2.5 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm3.982 13.982a1 1 0 0 1-1.414 0l-3.274-3.274A1.012 1.012 0 0 1 9 10V6a1 1 0 0 1 2 0v3.586l2.982 2.982a1 1 0 0 1 0 1.414Z"></path></svg>
    5 days ago
</span>

Badges as links

Use badges as links to direct users to specific pages or sections.

See on Github
Your link Page redirect Badge link Contact page
HTML

<a href="#" class="bg-[#ffffff] hover:bg-[#ffff99] text-black text-sm font-semibold me-2 px-4 py-1.5 rounded dark:bg-[#212121] dark:text-[#ffff00] border border-black dark:border-[#ffff00] inline-flex items-center justify-center">Your link</a>
<a href="#" class="bg-[#ffffff] hover:bg-[#ffff99] text-black text-sm font-medium me-2 px-4 py-1.5 rounded dark:bg-[#212121] dark:text-[#ffff00] border border-black dark:border-[#ffff00] inline-flex items-center justify-center">Page redirect</a>
<a href="#" class="bg-[#ffffff] hover:bg-[#ffff99] text-black text-sm font-semibold me-2 px-4 py-1.5 rounded dark:bg-[#212121] dark:text-[#ffff00] border border-black dark:border-[#ffff00] inline-flex items-center justify-center">Badge link</a>
<a href="#" class="bg-[#ffffff] hover:bg-[#ffff99] text-black text-sm font-medium me-2 px-4 py-1.5 rounded dark:bg-[#212121] dark:text-[#ffff00] border border-black dark:border-[#ffff00] inline-flex items-center justify-center">Contact page</a>

Notification badge

Here's an example of placing a badge within a button component.

See on Github
9+
HTML

<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" xmlSpace="preserve"><path fillRule="evenodd" clipRule="evenodd" fill="#25D366" d="m45.132 40.499-6.47-1.217c-1.102-.206-1.836-1.326-1.642-2.499.194-1.174 1.243-1.956 2.345-1.75l7.074 1.33a4.438 4.438 0 0 1 3.488 5.145c-.01.054-.027.102-.037.155-.327 1.173-.875 2.247-1.678 3.171-4.615 5.305-15.559 3.777-24.443-3.416-8.885-7.19-12.347-17.321-7.73-22.625 1.098-1.264 2.56-2.131 4.264-2.631.143-.036.281-.087.424-.108 0 0 .002-.003.005-.003a4.3 4.3 0 0 1 4.614 2.616l2.519 6.749c.373.998-.155 2.102-1.181 2.465-1.023.364-2.155-.15-2.528-1.148l-2.315-6.204a.89.89 0 0 0-1.091-.475 4.952 4.952 0 0 0-1.646 1.219c-3.195 3.673.043 11.37 7.236 17.19s15.615 7.563 18.809 3.891c.197-.228.361-.473.508-.729a.757.757 0 0 0 .084-.232.793.793 0 0 0-.609-.894zM6 42a2 2 0 1 1-3.999.001A2 2 0 0 1 6 42zm26 22a31.812 31.812 0 0 1-14.002-3.239c-.065-.028-.128-.058-.189-.087s-.124-.056-.185-.087a5.488 5.488 0 0 0-3.915-.393l-.08.019-5.804 1.612c-.021.005-.046.005-.068.013a4.53 4.53 0 0 1-2.415 0 4.545 4.545 0 0 1-3.18-5.588c.014-.056.019-.098.031-.148L3.889 50H4a2 2 0 1 1 4 0h.041l-.065.235c-.024.216-.08.419-.169.608L6.012 57.31c0 .004.007-.003.007.002a.544.544 0 0 0 .639.677c.005 0-.002.01 0 .01l5.952-1.654.032-.004a9.456 9.456 0 0 1 6.737.651c.02.01.043.013.065.02A27.835 27.835 0 0 0 32 60c15.465 0 28-12.536 28-28S47.465 4 32 4C16.536 4 4 16.536 4 32c0 .587.029 1.169.065 1.745l-.09.008c.01.08.025.162.025.247a2 2 0 1 1-3.947-.441A29.912 29.912 0 0 1 0 32C0 14.327 14.327 0 32 0s32 14.327 32 32-14.327 32-32 32z"></path>
    <text x="50%" y="18%" textAnchor="middle" stroke="#25d366" dy="1em" fontSize="50">9+</text>
</svg>

Button with badge

Here's an example of including a badge in a button component to indicate a count.

See on Github
HTML

<button type="button" class="inline-flex items-center px-5 py-2.5 text-sm font-medium text-center text-[#212121] rounded-lg focus:ring-2 focus:outline-none focus:ring-[#ffffa2] bg-[#ffff00] hover:bg-[#b0b02d]">
    Messages
    <span class="inline-flex items-center justify-center w-5 h-5 ms-2 text-xs font-semibold text-[#ffff00] bg-[#212121] rounded-full">9+</span>
</button>
<button type="button" class="inline-flex items-center px-5 py-2.5 text-sm font-medium text-center text-white rounded-lg focus:ring-2 focus:outline-none focus:ring-[#3c3c3c] bg-[#212121] hover:bg-[#181818]">
    Notifications
    <span class="inline-flex items-center justify-center w-5 h-5 ms-2 text-xs font-semibold text-[#212121] bg-white rounded-full">5</span>
</button>