Badges

Primary Secondary Success Danger Warning Info Light Dark

<span class="badge bg-primary text-white">Primary</span>
<span class="badge bg-secondary text-white">Secondary</span>
<span class="badge bg-success text-white">Success</span>
<span class="badge bg-danger text-white">Danger</span>
<span class="badge bg-warning text-white">Warning</span>
<span class="badge bg-info text-white">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-black text-white">Dark</span>

Pill badges

Primary Secondary Success Danger Warning Info Light Dark

<span class="badge !rounded-full bg-primary text-white">Primary</span>
                                    <span class="badge !rounded-full bg-secondary text-white">Secondary</span>
                                    <span class="badge !rounded-full bg-success text-white">Success</span>
                                    <span class="badge !rounded-full bg-danger text-white">Danger</span>
                                    <span class="badge !rounded-full bg-warning text-white">Warning</span>
                                    <span class="badge !rounded-full bg-info text-white">Info</span>
                                    <span class="badge !rounded-full bg-light text-dark">Light</span>
                                    <span class="badge !rounded-full bg-black text-white">Dark</span>

Light Badges

Primary Secondary Success Danger Warning Info Light Dark

<span class="badge bg-primary/10 text-primary">Primary</span>
                                    <span class="badge bg-secondary/10 text-secondary">Secondary</span>
                                    <span class="badge bg-success/10 text-success">Success</span>
                                    <span class="badge bg-danger/10 text-danger">Danger</span>
                                    <span class="badge bg-warning/10 text-warning">Warning</span>
                                    <span class="badge bg-info/10 text-info">Info</span>
                                    <span class="badge bg-light/10 text-black dark:text-defaulttextcolor/70">Light</span>
                                    <span class="badge bg-black/10 text-black dark:text-defaulttextcolor/70">Dark</span>

Light Pill Badges

Primary Secondary Success Danger Warning Info Light Dark

<span class="badge !rounded-full bg-primary/10 text-primary">Primary</span>
                                    <span class="badge !rounded-full bg-secondary/10 text-secondary">Secondary</span>
                                    <span class="badge !rounded-full bg-success/10 text-success">Success</span>
                                    <span class="badge !rounded-full bg-danger/10 text-danger">Danger</span>
                                    <span class="badge !rounded-full bg-warning/10 text-warning">Warning</span>
                                    <span class="badge !rounded-full bg-info/10 text-info">Info</span>
                                    <span class="badge !rounded-full bg-light/10 text-dark">Light</span>
                                    <span class="badge !rounded-full bg-black/10">Dark</span>

Gradient Badges

Primary Secondary Success Danger Warning Info orange purple


                                    <span class="badge bg-primary-gradient">Primary</span>
                                    <span class="badge bg-secondary-gradient">Secondary</span>
                                    <span class="badge bg-success-gradient">Success</span>
                                    <span class="badge bg-danger-gradient">Danger</span>
                                    <span class="badge bg-warning-gradient">Warning</span>
                                    <span class="badge bg-info-gradient">Info</span>
                                    <span class="badge bg-orange-gradient">orange</span>
                                    <span class="badge bg-purple-gradient">purple</span>

Gradient Pill Badges

Primary Secondary Success Danger Warning Info orange purple


                                    <span class="badge rounded-full bg-primary-gradient">Primary</span>
                                    <span class="badge rounded-full bg-secondary-gradient">Secondary</span>
                                    <span class="badge rounded-full bg-success-gradient">Success</span>
                                    <span class="badge rounded-full bg-danger-gradient">Danger</span>
                                    <span class="badge rounded-full bg-warning-gradient">Warning</span>
                                    <span class="badge rounded-full bg-info-gradient">Info</span>
                                    <span class="badge rounded-full bg-orange-gradient">orange</span>
                                    <span class="badge rounded-full bg-purple-gradient">purple</span>

Outline Badges

Primary Secondary Success Danger Warning Info Light Dark


                                    <span class="badge bg-outline-primary">Primary</span>
                                    <span class="badge bg-outline-secondary">Secondary</span>
                                    <span class="badge bg-outline-success">Success</span>
                                    <span class="badge bg-outline-danger">Danger</span>
                                    <span class="badge bg-outline-warning">Warning</span>
                                    <span class="badge bg-outline-info">Info</span>
                                    <span class="badge bg-outline-light !text-black dark:!text-defaulttextcolor/70">Light</span>
                                    <span class="badge bg-outline-dark dark:!text-defaulttextcolor/70">Dark</span>

Outline Pill Badges

Primary Secondary Success Danger Warning Info Light Dark


                                    <span class="badge !rounded-full bg-outline-primary">Primary</span>
                                    <span class="badge !rounded-full bg-outline-secondary">Secondary</span>
                                    <span class="badge !rounded-full bg-outline-success">Success</span>
                                    <span class="badge !rounded-full bg-outline-danger">Danger</span>
                                    <span class="badge !rounded-full bg-outline-warning">Warning</span>
                                    <span class="badge !rounded-full bg-outline-info">Info</span>
                                    <span class="badge !rounded-full bg-outline-light !text-black dark:!text-defaulttextcolor/70">Light</span>
                                    <span class="badge !rounded-full bg-outline-dark  dark:!text-defaulttextcolor/70">Dark</span>

Max width Badges

This content is a little bit longer. This content is a little bit longer. This content is a little bit longer. This content is a little bit longer.


    <span>
class="max-w-40 truncate whitespace-nowrap inline-block py-1.5 px-3 rounded-lg text-xs font-medium bg-primary/10 text-primary/80">This
content is a little bit longer.</span>
<span>
class="max-w-40 truncate whitespace-nowrap inline-block py-1.5 px-3 rounded-lg text-xs font-medium bg-secondary/10 text-secondary/80">This
content is a little bit longer.</span>
<span>
class="max-w-40 truncate whitespace-nowrap inline-block py-1.5 px-3 rounded-lg text-xs font-medium bg-success/10 text-success/80">This
content is a little bit longer.</span>
<span>
class="max-w-40 truncate whitespace-nowrap inline-block py-1.5 px-3 rounded-lg text-xs font-medium bg-danger/10 text-danger/80">This
content is a little bit longer.</span>

Badges with indicators

Badge Badge Badge Badge Badge Badge


    <span class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full text-xs font-medium bg-primary/10 text-primary">
    <span class="size-1.5 inline-block rounded-full bg-primary/80"></span>
    Badge
</span>
<span class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full text-xs font-medium bg-secondary/10 text-secondary">
    <span class="size-1.5 inline-block rounded-full bg-secondary/80"></span>
    Badge
</span>
<span class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full text-xs font-medium bg-warning/10 text-warning">
    <span class="size-1.5 inline-block rounded-full bg-warning/80"></span>
    Badge
</span>
<span class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full text-xs font-medium bg-success/10 text-success">
    <span class="size-1.5 inline-block rounded-full bg-success/80"></span>
    Badge
</span>
<span class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full text-xs font-medium bg-info/10 text-info">
    <span class="size-1.5 inline-block rounded-full bg-info/80"></span>
    Badge
</span>
<span class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full text-xs font-medium bg-danger/10 text-danger">
    <span class="size-1.5 inline-block rounded-full bg-danger/80"></span>
    Badge
</span>

Badges with icons

Connected Attention Loading Disabled 14.5% 2% 37.3% 56%


    <span class="py-1 px-2 inline-flex items-center gap-x-1 text-xs font-medium bg-primary/10 text-primary/80 rounded-full">
    <svg class="flex-shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" />
        <path d="m9 12 2 2 4-4" />
    </svg>
    Connected
</span>
<span
    class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-secondary/10 text-secondary/80 rounded-full">
    <svg class="flex-shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" />
        <path d="M12 9v4" />
        <path d="M12 17h.01" />
    </svg>
    Attention
</span>
<span
    class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-warning/10 text-warning/80 rounded-full">
    <svg class="flex-shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <line x1="12" x2="12" y1="2" y2="6" />
        <line x1="12" x2="12" y1="18" y2="22" />
        <line x1="4.93" x2="7.76" y1="4.93" y2="7.76" />
        <line x1="16.24" x2="19.07" y1="16.24" y2="19.07" />
        <line x1="2" x2="6" y1="12" y2="12" />
        <line x1="18" x2="22" y1="12" y2="12" />
        <line x1="4.93" x2="7.76" y1="19.07" y2="16.24" />
        <line x1="16.24" x2="19.07" y1="7.76" y2="4.93" />
    </svg>
    Loading
</span>
<span class="py-1 px-2 inline-flex items-center gap-x-1 text-xs bg-info/10 text-info/80 rounded-full">
    <svg class="flex-shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M18.36 6.64a9 9 0 1 1-12.73 0" />
        <line x1="12" x2="12" y1="2" y2="12" />
    </svg>
    Disabled
</span>
<span
    class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-success/10 text-success/80 rounded-full">
    <svg class="flex-shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="22 7 13.5 15.5 8.5 10.5 2 17" />
        <polyline points="16 7 22 7 22 13" />
    </svg>
    14.5%
</span>
<span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-danger/10 text-danger/80 rounded-full">
    <svg class="flex-shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="22 17 13.5 8.5 8.5 13.5 2 7" />
        <polyline points="16 17 22 17 22 11" />
    </svg>
    2%
</span>
<span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs bg-primary/10 text-primary/80 rounded-full">
    <svg class="flex-shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="22 7 13.5 15.5 8.5 10.5 2 17" />
        <polyline points="16 7 22 7 22 13" />
    </svg>
    37.3%
</span>
<span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs bg-secondary/10 text-secondary/80 rounded-full">
    <svg class="flex-shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="22 17 13.5 8.5 8.5 13.5 2 7" />
        <polyline points="16 17 22 17 22 11" />
    </svg>
    56%
</span>

Badges with remove button

Badge Badge Badge Badge Badge Badge


                                    <span class="inline-flex items-center gap-x-1.5 py-1.5 ps-3 pe-2 rounded-full text-xs font-medium bg-primary/10 text-primary/80">
    Badge
    <button type="button" class="flex-shrink-0 size-4 inline-flex items-center justify-center rounded-full hover:bg-primary/20 focus:outline-none focus:bg-primary/20 focus:text-primary/50 dark:hover:bg-primary/90">
      <span class="sr-only">Remove badge</span>
      <i class="ti ti-x size-3"></i>
    </button>
</span>
<span class="inline-flex items-center gap-x-1.5 py-1.5 ps-3 pe-2 rounded-full text-xs font-medium bg-secondary/10 text-secondary/80">
    Badge
    <button type="button" class="flex-shrink-0 size-4 inline-flex items-center justify-center rounded-full hover:bg-secondary/20 focus:outline-none focus:bg-secondary/20 focus:text-secondary/50 dark:hover:bg-secondary/90">
      <span class="sr-only">Remove badge</span>
      <i class="ti ti-x size-3"></i>
    </button>
</span>
<span class="inline-flex items-center gap-x-1.5 py-1.5 ps-3 pe-2 rounded-full text-xs font-medium bg-success/10 text-success/80">
    Badge
    <button type="button" class="flex-shrink-0 size-4 inline-flex items-center justify-center rounded-full hover:bg-success/20 focus:outline-none focus:bg-success/20 focus:text-success/50 dark:hover:bg-success/90">
      <span class="sr-only">Remove badge</span>
      <i class="ti ti-x size-3"></i>
    </button>
</span>
<span class="inline-flex items-center gap-x-1.5 py-1.5 ps-3 pe-2 rounded-full text-xs font-medium bg-warning/10 text-warning/80">
    Badge
    <button type="button" class="flex-shrink-0 size-4 inline-flex items-center justify-center rounded-full hover:bg-warning/20 focus:outline-none focus:bg-warning/20 focus:text-warning/50 dark:hover:bg-warning/90">
      <span class="sr-only">Remove badge</span>
      <i class="ti ti-x size-3"></i>
    </button>
</span>
<span class="inline-flex items-center gap-x-1.5 py-1.5 ps-3 pe-2 rounded-full text-xs font-medium bg-info/10 text-info/80">
    Badge
    <button type="button" class="flex-shrink-0 size-4 inline-flex items-center justify-center rounded-full hover:bg-info/20 focus:outline-none focus:bg-info/20 focus:text-info/50 dark:hover:bg-info/90">
      <span class="sr-only">Remove badge</span>
      <i class="ti ti-x size-3"></i>
    </button>
</span>
<span class="inline-flex items-center gap-x-1.5 py-1.5 ps-3 pe-2 rounded-full text-xs font-medium bg-danger/10 text-danger/80">
    Badge
    <button type="button" class="flex-shrink-0 size-4 inline-flex items-center justify-center rounded-full hover:bg-danger/20 focus:outline-none focus:bg-danger/20 focus:text-danger/50 dark:hover:bg-danger/90">
      <span class="sr-only">Remove badge</span>
      <i class="ti ti-x size-3"></i>
    </button>
</span>

Badges with avatars

Christina

Mark

Bhamako

Wicky cross

Brodus


    <div class="inline-flex flex-nowrap items-center border border-defaultborder rounded-full p-1.5 pe-3 dark:border-white/10">
    <img class="me-1.5 mb-0 inline-block avatar avatar-xs avatar-rounded" src="../assets/images/faces/10.jpg" alt="Image Description">
    <div> class="whitespace-nowrap text-sm font-medium text-defaulttextcolor dark:text-white">
        Christina
    </div>
</div>
<div class="inline-flex flex-nowrap items-center border border-defaultborder rounded-full p-1.5 dark:border-white/10">
    <img class="me-1.5 mb-0 inline-block avatar avatar-xs avatar-rounded" src="../assets/images/faces/11.jpg" alt="Image Description">
    <div> class="whitespace-nowrap text-sm font-medium text-defaulttextcolor dark:text-white">
        Mark
    </div>
</div>
<div class="inline-flex flex-nowrap items-center border border-defaultborder rounded-full p-1.5 dark:border-white/10">
    <img class="me-1.5 mb-0 inline-block avatar avatar-xs avatar-rounded" src="../assets/images/faces/12.jpg" alt="Image Description">
    <div> class="whitespace-nowrap text-sm font-medium text-defaulttextcolor dark:text-white">
        Bhamako
    </div>
</div>
<div class="inline-flex flex-nowrap items-center border border-defaultborder rounded-full p-1.5 dark:border-white/10">
    <img class="me-1.5 mb-0 inline-block avatar avatar-xs avatar-rounded" src="../assets/images/faces/13.jpg" alt="Image Description">
    <div> class="whitespace-nowrap text-sm font-medium text-defaulttextcolor dark:text-white">
        Wicky cross
    </div>
</div>
<div class="inline-flex flex-nowrap items-center border border-defaultborder rounded-full p-1.5 dark:border-white/10">
    <img class="me-1.5 mb-0 inline-block avatar avatar-xs avatar-rounded" src="../assets/images/faces/14.jpg" alt="Image Description">
    <div> class="whitespace-nowrap text-sm font-medium text-defaulttextcolor dark:text-white">
        Brodus
    </div>
</div>

Badges with animation ping


    <button type="button"
    class="m-1 ms-0 relative flex justify-center items-center size-[35px] text-sm font-semibold rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-bodybg dark:border-white/10 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
    <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="m5 11 4-7" />
        <path d="m19 11-4-7" />
        <path d="M2 11h20" />
        <path d="m3.5 11 1.6 7.4a2 2 0 0 0 2 1.6h9.8c.9 0 1.8-.7 2-1.6l1.7-7.4" />
        <path d="m9 11 1 9" />
        <path d="M4.5 15.5h15" />
        <path d="m15 11-1 9" />
    </svg>
    <span class="flex absolute top-0 end-0 size-3 -mt-1.5 -me-1.5">
        <span
            class="animate-ping absolute inline-flex size-full rounded-full bg-danger/40 opacity-75 dark:bg-danger/60"></span>
        <span class="relative inline-flex rounded-full size-3 bg-danger/50"></span>
    </span>
</button>
<button type="button"
    class="m-1 ms-0 relative py-1 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 dark:bg-bodybg dark:border-white/10 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
    Notification
    <span class="flex absolute top-0 end-0 -mt-2 -me-2">
        <span class="animate-ping absolute inline-flex size-full rounded-full bg-danger/40 opacity-75"></span>
        <span class="relative inline-flex text-xs bg-danger/50 text-white rounded-full py-0.5 px-1.5">
            9+
        </span>
    </span>
</button>

Buttons With Badges

<button type="button" class="ti-btn bg-primary text-white my-1 me-2">
                                    Notifications <span class="badge ms-2 bg-secondary">4</span>
                                    </button>
                                    <button type="button" class="ti-btn bg-secondary text-white my-1 me-2">
                                    Notifications <span class="badge ms-2 bg-primary">7</span>
                                    </button>
                                    <button type="button" class="ti-btn bg-success text-white my-1 me-2">
                                    Notifications <span class="badge ms-2 bg-danger">12</span>
                                    </button>
                                    <button type="button" class="ti-btn bg-info text-white my-1 me-2">
                                    Notifications <span class="badge ms-2 bg-warning">32</span>
                                    </button>

Outline Button Badges

<button type="button" class="ti-btn ti-btn-outline-primary my-1 me-2">
                                    Notifications <span class="badge bg-primary ms-2 text-white">4</span>
                                </button>
                                <button type="button" class="ti-btn ti-btn-outline-secondary my-1 me-2">
                                    Notifications <span class="badge bg-secondary ms-2 text-white">7</span>
                                </button>
                                <button type="button" class="ti-btn ti-btn-outline-success my-1 me-2">
                                    Notifications <span class="badge bg-success ms-2 text-white">12</span>
                                </button>
                                <button type="button" class="ti-btn ti-btn-outline-info my-1 me-2">
                                    Notifications <span class="badge bg-info ms-2 text-white">32</span>
                                </button>

Headings

Example heading New

<h1 class="text-[2.5rem]">Example heading <span class="badge bg-primary text-white">New</span></h1>
                                    <h2 class="text-[2rem]">Example heading <span class="badge bg-primary text-white">New</span></h2>
                                    <h3 class="text-[1.75rem]">Example heading <span class="badge bg-primary text-white">New</span></h3>
                                    <h4 class="text-[1.5rem]">Example heading <span class="badge bg-primary text-white">New</span></h4>
                                    <h5 class="text-[1.25rem]">Example heading <span class="badge bg-primary text-white">New</span></h5>
                                    <h6 class="text-[1rem]">Example heading <span class="badge bg-primary text-white">New</span></h6>

Positioned Badges

1000+

<button type="button" class="ti-btn bg-primary text-white relative">
    Inbox
    <span
        class="absolute -top-2 start-[60%] translate-middle  badge !rounded-full bg-danger">
        99+
        <span class="hidden">unread messages</span>
    </span>
</button>
<button type="button" class="ti-btn bg-secondary text-white relative">
    Profile
    <span
        class="absolute -top-2 start-[80%] translate-middle p-2 bg-success border border-light !rounded-full">
        <span class="hidden">New alerts</span>
    </span>
</button>
<span class="avatar relative">
    <img src="../assets/images/faces/2.jpg" alt="img" class="!rounded-md">
    <span
        class="absolute -top-2 start-[80%] translate-middle p-1 bg-success border border-light !rounded-full">
        <span class="hidden">New alerts</span>
    </span>
</span>
<span class="avatar avatar-rounded relative">
    <img src="../assets/images/faces/15.jpg" alt="img">
    <span
        class="absolute -top-2 start-[80%] translate-middle p-1 bg-success border border-light !rounded-full">
        <span class="hidden">New alerts</span>
    </span>
</span>
<span class="avatar avatar-rounded relative">
    <img src="../assets/images/faces/10.jpg" alt="img">
    <span
        class="absolute -top-2 start-[60%] translate-middle badge bg-secondary !rounded-full shadow-lg text-white">1000+
        <span class="hidden">New alerts</span>
    </span>
</span>

Positioned Badges

Hot

14

13.2k

Inbox 32

<div class="flex items-center gap-5 flex-wrap">
                                            <div>
                                                <span class="badge bg-outline-secondary !font-semibold !text-[.9375rem] inline-flex items-center">
                                                    <i class="ti ti-flame me-1"></i>
                                                    Hot
                                                </span>
                                            </div>
                                            <div>
                                                <span class="relative">
                                                    <svg class="fill-textmuted dark:fill-textmuted/50 w-8 h-8 text-[2rem]" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"></path></svg>
                                                    <span class="badge !rounded-full bg-success text-white absolute -end-2 top-0">14</span>
                                                </span>
                                            </div>
                                            <div>
                                                <span class="badge border bg-light text-defaulttextcolor font-semibold font-[.7rem]"><i class="fe fe-eye me-2 inline-block"></i>13.2k</span>
                                            </div>
                                            <div>
                                                <span class="text-badge relative">
                                                    <span class="text text-lg">Inbox</span>
                                                    <span class="badge !rounded-full bg-success text-white">32</span>
                                                </span>
                                            </div>
                                        </div>

Switcher

Badge

Example heading New