Badge

Tailwind CSS and Alpine JS Badge

Badges are a great way to highlight important information or content on your website. They can be used to indicate the status of an item, such as new or unread, or to draw attention to a specific element.

Default Badge

A badge with a text label and solid background.

Badge Badge Badge Badge Badge Badge Badge Badge
HTML 
<!-- default Badge -->
<span class="">Bagde</span>

<!-- inverse Badge -->
<span class="">Bagde</span>

<!-- primary Badge -->
<span class="">Bagde</span>

<!-- secondary Badge -->
<span class="">Bagde</span>

<!-- info Badge -->
<span class="">Bagde</span>

<!-- success Badge -->
<span class="">Bagde</span>

<!-- warning Badge -->
<span class="">Bagde</span>

<!-- danger Badge -->
<span class="">Bagde</span>

Soft Color Badge

A badge with a text label and soft background.

Badge Badge Badge Badge Badge Badge Badge Badge
HTML 
<!-- default Badge -->
<span class="">
    <span class="">Bagde</span>
</span>

<!-- inverse Badge -->
<span class="">
    <span class="">Bagde</span>
</span>

<!-- primary Badge -->
<span class="">
    <span class="">Bagde</span>
</span>

<!-- secondary Badge -->
<span class="">
    <span class="">Bagde</span>
</span>

<!-- info Badge -->
<span class="">
    <span class="">Bagde</span>
</span>

<!-- success Badge -->
<span class="">
    <span class="">Bagde</span>
</span>

<!-- warning Badge -->
<span class="">
    <span class="">Bagde</span>
</span>

<!-- danger Badge -->
<span class="">
    <span class="">Bagde</span>
</span>

Badge with Indicator

A badge with a text label and status indicator.

Badge Badge Badge Badge Badge Badge Badge Badge
HTML 
<!-- default Badge -->
<span class="">
    <span class="">
        <span class=""></span>
        Bagde
    </span>
</span>

<!-- inverse Badge -->
<span class="">
    <span class="">
        <span class=""></span>
        Bagde
    </span>
</span>

<!-- primary Badge -->
<span class="">
    <span class="">
        <span class=""></span>
        Bagde
    </span>
</span>

<!-- secondary Badge -->
<span class="">
    <span class="">
        <span class=""></span>
        Bagde
    </span>
</span>

<!-- info Badge -->
<span class="">
    <span class="">
        <span class=""></span>
        Bagde
    </span>
</span>

<!-- success Badge -->
<span class="">
    <span class="">
        <span class=""></span>
        Bagde
    </span>
</span>

<!-- warning Badge -->
<span class="">
    <span class="">
        <span class=""></span>
        Bagde
    </span>
</span>

<!-- danger Badge -->
<span class="">
    <span class="">
        <span class=""></span>
        Bagde
    </span>
</span>

Badge with Icon

A badge with an icon.

Penguin Filter Verified Active Outdated Disconnected
HTML 
<!-- primary Badge -->
<span class="">
    <span class="">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="size-3">
             <path fill-rule="evenodd" d="M11.097 1.515a.75.75 0 01.589.882L10.666 7.5h4.47l1.079-5.397a.75.75 0 111.47.294L16.665 7.5h3.585a.75.75 0 010 1.5h-3.885l-1.2 6h3.585a.75.75 0 010 1.5h-3.885l-1.08 5.397a.75.75 0 11-1.47-.294l1.02-5.103h-4.47l-1.08 5.397a.75.75 0 01-1.47-.294l1.02-5.103H3.75a.75.75 0 110-1.5h3.885l1.2-6H5.25a.75.75 0 010-1.5h3.885l1.08-5.397a.75.75 0 01.882-.588zM10.365 9l-1.2 6h4.47l1.2-6h-4.47z" clip-rule="evenodd"/>
        </svg>
        Penguin
    </span>
</span>

<!-- secondary Badge -->
<span class="">
    <span class="">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="1.4" class="size-4">
             <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
        </svg>
        Filter
    </span>
</span>

<!-- info Badge -->
<span class="">
    <span class="">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="size-4">
             <path fill-rule="evenodd" d="M8.603 3.799A4.49 4.49 0 0112 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 013.498 1.307 4.491 4.491 0 011.307 3.497A4.49 4.49 0 0121.75 12a4.49 4.49 0 01-1.549 3.397 4.491 4.491 0 01-1.307 3.497 4.491 4.491 0 01-3.497 1.307A4.49 4.49 0 0112 21.75a4.49 4.49 0 01-3.397-1.549 4.49 4.49 0 01-3.498-1.306 4.491 4.491 0 01-1.307-3.498A4.49 4.49 0 012.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 011.307-3.497 4.49 4.49 0 013.497-1.307zm7.007 6.387a.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>
        Verified
    </span>
</span>

<!-- success Badge -->
<span class="">
    <span class="">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="size-4">
             <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>
        Active
    </span>
</span>

<!-- warning Badge -->
<span class="">
    <span class="">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="size-4">
             <path fill-rule="evenodd" d="M11.484 2.17a.75.75 0 011.032 0 11.209 11.209 0 007.877 3.08.75.75 0 01.722.515 12.74 12.74 0 01.635 3.985c0 5.942-4.064 10.933-9.563 12.348a.749.749 0 01-.374 0C6.314 20.683 2.25 15.692 2.25 9.75c0-1.39.223-2.73.635-3.985a.75.75 0 01.722-.516l.143.001c2.996 0 5.718-1.17 7.734-3.08zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zM12 15a.75.75 0 00-.75.75v.008c0 .414.336.75.75.75h.008a.75.75 0 00.75-.75v-.008a.75.75 0 00-.75-.75H12z" clip-rule="evenodd"/>
        </svg>
        Outdated
    </span>
</span>

<!-- danger Badge -->
<span class="">
    <span class="">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="size-4">
             <path fill-rule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 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>
        Disconnected
    </span>
</span>

Notification Badge

A badge that used as a notification indicator.

HTML 
<button class="" aria-label="notifications">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="size-8">
         <path fill-rule="evenodd" d="M5.25 9a6.75 6.75 0 0113.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 01-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 11-7.48 0 24.585 24.585 0 01-4.831-1.244.75.75 0 01-.298-1.205A8.217 8.217 0 005.25 9.75V9zm4.502 8.9a2.25 2.25 0 104.496 0 25.057 25.057 0 01-4.496 0z" clip-rule="evenodd"/>
    </svg>
    <span class="sr-only">notifications</span>
    <span class="">99+</span>
</button>

<button class="" aria-label="messages">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="size-8">
         <path fill-rule="evenodd" d="M4.848 2.771A49.144 49.144 0 0112 2.25c2.43 0 4.817.178 7.152.52 1.978.292 3.348 2.024 3.348 3.97v6.02c0 1.946-1.37 3.678-3.348 3.97-1.94.284-3.916.455-5.922.505a.39.39 0 00-.266.112L8.78 21.53A.75.75 0 017.5 21v-3.955a48.842 48.842 0 01-2.652-.316c-1.978-.29-3.348-2.024-3.348-3.97V6.741c0-1.946 1.37-3.68 3.348-3.97z" clip-rule="evenodd"/>
    </svg>
    <span class=""></span>
</button>

Animating Notification Badge

A badge that used as a notification indicator with ping animation.

HTML 
<!-- primary Badge -->
<span class="" aria-label="notification">
    <span class="">
    </span>
</span>

<!-- secondary Badge -->
<span class="" aria-label="notification">
    <span class="">
    </span>
</span>

<!-- info Badge -->
<span class="" aria-label="notification">
    <span class="">
    </span>
</span>

<!-- success Badge -->
<span class="" aria-label="notification">
    <span class="">
    </span>
</span>

<!-- warning Badge -->
<span class="" aria-label="notification">
    <span class="">
    </span>
</span>

<!-- danger Badge -->
<span class="" aria-label="notification">
    <span class="">
    </span>
</span>