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-dark 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-dark 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 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-dark/10">Dark</span>

Gradient Badges

Primary Secondary Success Danger Warning Info orange purple

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

Gradient Pill Badges

Primary Secondary Success Danger Warning Info orange purple

<span class="badge badge-primary-gradient">Primary</span>
    <span class="badge rounded-full badge-secondary-gradient">Secondary</span>
    <span class="badge rounded-full badge-success-gradient">Success</span>
    <span class="badge rounded-full badge-danger-gradient">Danger</span>
    <span class="badge rounded-full badge-warning-gradient">Warning</span>
    <span class="badge rounded-full badge-info-gradient">Info</span>
    <span class="badge rounded-full badge-orange-gradient">orange</span>
    <span class="badge rounded-full badge-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-dark">Light</span>
    <span class="badge bg-outline-dark">Dark</span>

Outline Pill Badges

Primary Secondary Success Danger Warning Info Light Dark

<span class="badge 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-dark">Light</span>
    <span class="badge !rounded-full bg-outline-dark">Dark</span>

Buttons With Badges

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

Badges with Remove Button

Badge Badge Badge Badge Badge Badge Badge Badge Badge


        <span class="badge gap-2 bg-primary/10 text-primary">
            Badge
            <button type="button"
                class="flex-shrink-0 h-4 w-4 inline-flex items-center justify-center rounded-full text-primary hover:bg-primary/10 hover:text-primary focus:outline-none focus:bg-primary/10 focus:text-primary">
                <span class="sr-only">Remove badge gap-2</span>
                <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                    fill="currentColor" viewBox="0 0 16 16">
                    <path
                        d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
                </svg>
            </button>
        </span>
        <span class="badge gap-2 bg-secondary/10 text-secondary">
            Badge
            <button type="button"
                class="flex-shrink-0 h-4 w-4 inline-flex items-center justify-center rounded-full text-secondary hover:bg-secondary/10 hover:text-secondary focus:outline-none focus:bg-secondary focus:text-secondary">
                <span class="sr-only">Remove badge</span>
                <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                    fill="currentColor" viewBox="0 0 16 16">
                    <path
                        d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
                </svg>
            </button>
        </span>
        <span class="badge gap-2 bg-success/10 text-success">
            Badge
            <button type="button"
                class="flex-shrink-0 h-4 w-4 inline-flex items-center justify-center rounded-full text-success hover:bg-success/10 hover:text-success focus:outline-none focus:bg-red-200 focus:text-success">
                <span class="sr-only">Remove badge</span>
                <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                    fill="currentColor" viewBox="0 0 16 16">
                    <path
                        d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
                </svg>
            </button>
        </span>
        <span class="badge gap-2 bg-danger/10 text-danger">
            Badge
            <button type="button"
                class="flex-shrink-0 h-4 w-4 inline-flex items-center justify-center rounded-full text-danger hover:bg-danger/10 hover:text-danger focus:outline-none focus:bg-danger/10 focus:text-danger">
                <span class="sr-only">Remove badge</span>
                <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                    fill="currentColor" viewBox="0 0 16 16">
                    <path
                        d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
                </svg>
            </button>
        </span>
        <span class="badge gap-2 bg-warning/10 text-warning">
            Badge
            <button type="button"
                class="flex-shrink-0 h-4 w-4 inline-flex items-center justify-center rounded-full text-warning hover:bg-warning/10 hover:text-warning focus:outline-none focus:bg-warning/10 focus:text-warning">
                <span class="sr-only">Remove badge</span>
                <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                    fill="currentColor" viewBox="0 0 16 16">
                    <path
                        d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
                </svg>
            </button>
        </span>
        <span class="badge gap-2 bg-black/10 text-black">
            Badge
            <button type="button"
                class="flex-shrink-0 h-4 w-4 inline-flex items-center justify-center rounded-full text-black hover:bg-black/10 hover:text-black focus:outline-none focus:bg-black/10 focus:text-black/10">
                <span class="sr-only">Remove badge</span>
                <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                    fill="currentColor" viewBox="0 0 16 16">
                    <path
                        d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
                </svg>
            </button>
        </span>
        <span class="badge gap-2 bg-orangemain/10 text-orangemain">
            Badge
            <button type="button"
                class="flex-shrink-0 h-4 w-4 inline-flex items-center justify-center rounded-full text-orange-600 hover:bg-orange-200 hover:text-orange-500 focus:outline-none focus:bg-orange-200 focus:text-orange-500">
                <span class="sr-only">Remove badge</span>
                <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                    fill="currentColor" viewBox="0 0 16 16">
                    <path
                        d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
                </svg>
            </button>
        </span>
        <span class="badge gap-2 bg-pinkmain/10 text-pinkmain">
            Badge
            <button type="button"
                class="flex-shrink-0 h-4 w-4 inline-flex items-center justify-center rounded-full text-pinkmain hover:bg-pinkmain/10 hover:text-pinkmain focus:outline-none focus:bg-pinkmain/10 focus:text-pinkmain">
                <span class="sr-only">Remove badge</span>
                <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                    fill="currentColor" viewBox="0 0 16 16">
                    <path
                        d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
                </svg>
            </button>
        </span>
        <span class="badge gap-2 bg-purplemain/10 text-purplemain">
            Badge
            <button type="button"
                class="flex-shrink-0 h-4 w-4 inline-flex items-center justify-center rounded-full text-purplemain dark:text-purplemain hover:bg-purplemain/10 hover:text-purplemain dark:hover:bg-black/20 dark:hover:text-purplemain focus:outline-none focus:bg-gray-200 focus:text-gray-500">
                <span class="sr-only">Remove badge</span>
                <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                    fill="currentColor" viewBox="0 0 16 16">
                    <path
                        d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
                </svg>
            </button>
        </span>

Badge With Indicator

Badge Badge Badge Badge Badge Badge Badge Badge Badge

<span class="badge gap-2 bg-primary/10 text-primary">
        <span class="w-1.5 h-1.5 inline-block bg-primary rounded-full"></span>
        Badge
    </span>
    <span class="badge gap-2 bg-secondary/10 text-secondary">
        <span class="w-1.5 h-1.5 inline-block bg-secondary rounded-full"></span>
        Badge
    </span>
    <span class="badge gap-2 bg-success/10 text-success">
        <span class="w-1.5 h-1.5 inline-block bg-success rounded-full"></span>
        Badge
    </span>
    <span class="badge gap-2 bg-danger/10 text-danger">
        <span class="w-1.5 h-1.5 inline-block bg-danger rounded-full"></span>
        Badge
    </span>
    <span class="badge gap-2 bg-warning/10 text-warning">
        <span class="w-1.5 h-1.5 inline-block bg-warning rounded-full"></span>
        Badge
    </span>
    <span class="badge gap-2 bg-black/10 text-black">
        <span class="w-1.5 h-1.5 inline-block bg-black rounded-full"></span>
        Badge
    </span>
    <span class="badge gap-2 bg-orangemain/10 text-orangemain">
        <span class="w-1.5 h-1.5 inline-block bg-orangemain rounded-full"></span>
        Badge
    </span>
    <span class="badge gap-2 bg-pinkmain/10 text-pinkmain">
        <span class="w-1.5 h-1.5 inline-block bg-pinkmain rounded-full"></span>
        Badge
    </span>
    <span class="badge gap-2 bg-purplemain/10 text-purplemain">
        <span class="w-1.5 h-1.5 inline-block bg-purplemain rounded-full"></span>
        Badge
    </span>

Headings

Example heading New

<h1>Example heading <span class="badge bg-primary">New</span></h1>
    <h2>Example heading <span class="badge bg-primary text-white">New</span></h2>
    <h3>Example heading <span class="badge bg-primary text-white">New</span></h3>
    <h4>Example heading <span class="badge bg-primary text-white">New</span></h4>
    <h5>Example heading <span class="badge bg-primary text-white">New</span></h5>
    <h6>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 left-[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 left-[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="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/2.jpg" alt="img" class="!rounded-md">
        <span
            class="absolute -top-2 left-[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="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/15.jpg" alt="img">
        <span
            class="absolute -top-2 left-[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="https://laravelui.spruko.com/tailwind/valex/build/assets/images/faces/10.jpg" alt="img">
        <span
            class="absolute -top-2 left-[60%] translate-middle badge bg-secondary !rounded-full shadow-lg text-white">1000+
            <span class="hidden">New alerts</span>
        </span>
    </span>

Switcher

Petey Cruiser

Jimmy Changa

Graham Cracker

Donatella Nobatti

Anne Fibbiyon

New files available

Updates Available

New Order Received

New review received

22 verified registrations

Project has been approved

Petey Cruiser

Notifications

Daneil Scott

Valex Video call

Daneil Scott

Calling...

Valex Voice call

Daneil Scott

Calling...

Badge

Badges with Remove Button

Badge With Indicator

Example heading New