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>

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