Tag & Pills | Cuba - Premium Admin Template By Pixelstrap

Loading...

###### Don't Miss Out! Our new update has been released.

###### Something you love is now on sale!

Buy now !

### Tag & Pills

##### Badges Contextual Variations

Use`badge` class to make more badges.

PrimarySecondarySuccessInfoWarningDangerLightDark

    <div class="badge-spacing">
     <span class="badge badge-primary">Primary</span>
     <span class="badge badge-secondary">Secondary</span>
     <span class="badge badge-success">Success</span>
     <span class="badge badge-info">Info</span>
     <span class="badge badge-warning">Warning</span>
     <span class="badge badge-danger">Danger</span>
     <span class="badge badge-light txt-dark">Light</span>
     <span class="badge badge-dark">Dark</span>
    </div>

##### Badges Outline Contextual Variations

Use`badge` class to make more badges.

PrimarySecondarySuccessInfoWarningDangerLightDark

    <div class="badge-spacing">
     <span class="badge badge-b-primary txt-primary">Primary</span>
     <span class="badge badge-b-secondary txt-secondary">Secondary</span>
     <span class="badge badge-b-success txt-success">Success</span>
     <span class="badge badge-b-info txt-info">Info</span>
     <span class="badge badge-b-warning txt-warning">Warning</span>
     <span class="badge badge-b-danger txt-danger">Danger</span>
     <span class="badge badge-b-light txt-dark">Light</span>
     <span class="badge badge-b-dark txt-dark">Dark</span>
    </div>

##### Pill Contextual Variations

Use`rounded-full` class to make badges with background (badge-*) more rounded with a larger `border-radius` .

PrimarySecondarySuccessInfoWarningDangerLightDark

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

##### Pill Outline Variations

Use`rounded-full` class to make badges with background (badge-b-*) more rounded with a larger `border-radius`.

PrimarySecondarySuccessInfoWarningDangerLightDark

    <div class="badge-spacing">
     <span class="badge rounded-full txt-primary badge-b-primary">Primary</span>
     <span class="badge rounded-full txt-secondary badge-b-secondary">Secondary</span>
     <span class="badge rounded-full txt-success badge-b-success">Success</span>
     <span class="badge rounded-full txt-info badge-b-info">Info</span>
     <span class="badge rounded-full txt-warning badge-b-warning">Warning</span>
     <span class="badge rounded-full txt-danger badge-b-danger">Danger</span>
     <span class="badge rounded-full txt-light badge-b-light txt-dark">Light</span>
     <span class="badge rounded-full txt-dark badge-b-dark">Dark</span>
    </div>

##### Number of Badges

Use`badge` class to make square badges with numbers.

12345678

    <div class="badge-spacing">
     <a class="badge text-white rounded badge-primary" href="#">1</a>
     <a class="badge text-white rounded badge-secondary" href="#">2</a>
     <a class="badge text-white rounded badge-success" href="#">3</a>
     <a class="badge text-white rounded badge-info" href="#">4</a>
     <a class="badge text-white rounded badge-warning" href="#">5</a>
     <a class="badge text-white rounded badge-danger" href="#">6</a>
     <a class="badge rounded badge-light txt-dark" href="#">7</a>
     <a class="badge text-white rounded badge-dark" href="#">8</a>
    </div>

##### Number of Pill Badges

Use`rounded-full` class to make rounded badges with numbers.

12345678

     <div class="badge-spacing">
     <span class="badge rounded-full text-white badge-p-space badge-primary">1</span>
     <span class="badge rounded-full text-white badge-p-space badge-secondary">2</span>
     <span class="badge rounded-full text-white badge-p-space badge-success">3</span>
     <span class="badge rounded-full text-white badge-p-space badge-info">4</span>
     <span class="badge rounded-full text-white badge-p-space badge-warning">5</span>
     <span class="badge rounded-full text-white badge-p-space badge-danger">6</span>
     <span class="badge rounded-full text-white badge-p-space badge-light txt-dark">7</span>
     <span class="badge rounded-full text-white badge-p-space badge-dark">8</span>
    </div>

##### Badge Tag with Icons

Use`badge` class to make square badges with icons.

    <div class="badge-spacing">
     <a class="badge rounded b-ln-height badge-primary" href="#">
       <i class="stroke-white" data-feather="dollar-sign"></i>
     </a>
     <a class="badge rounded b-ln-height badge-secondary" href="#">
       <i class="stroke-white" data-feather="headphones"></i>
     </a>
     <a class="badge rounded b-ln-height badge-success" href="#">
       <i class="stroke-white" data-feather="link"></i>
     </a>
     <a class="badge rounded b-ln-height badge-info" href="#">
       <i class="stroke-white" data-feather="github"></i>
     </a>
     <a class="badge rounded b-ln-height badge-warning" href="#">
       <i class="stroke-white" data-feather="award"></i>
     </a>
     <a class="badge rounded b-ln-height badge-danger" href="#">
       <i class="stroke-white" data-feather="activity"></i>
     </a>
     <a class="badge rounded b-ln-height badge-light txt-dark" href="#">
       <i class="stroke-white" data-feather="heart"></i>
     </a>
     <a class="badge rounded badge-dark" href="#">
       <i class="stroke-white" data-feather="mail"></i>
     </a>
    </div>

##### Rounded Pills with Icons

Use`rounded-full` class to make rounded badges with icons.

    <div class="badge-spacing">
     <a class="badge rounded-full p-2 badge-primary" href="#">
       <i class="stroke-white" data-feather="dollar-sign"></i>
     </a>
     <a class="badge rounded-full p-2 badge-secondary" href="#">
       <i class="stroke-white" data-feather="headphones"></i>
     </a>
     <a class="badge rounded-full p-2 badge-success" href="#">
       <i class="stroke-white" data-feather="link"></i>
     </a>
     <a class="badge rounded-full p-2 badge-info" href="#">
       <i class="stroke-white" data-feather="github"></i>
     </a>
     <a class="badge rounded-full p-2 badge-warning" href="#">
       <i class="stroke-white" data-feather="award"></i>
     </a>
     <a class="badge rounded-full p-2 badge-danger" href="#">
       <i class="stroke-white" data-feather="activity"></i>
     </a>
     <a class="badge rounded-full p-2 badge-light txt-dark" href="#">
       <i class="stroke-white" data-feather="heart"></i>
     </a>
     <a class="badge rounded-full p-2 badge-dark" href="#">
       <i class="stroke-white" data-feather="mail"></i>
     </a>
    </div>

##### Badge Headings

All html headings, `<h1>` through `<h6>` , are available in `badge` tags.

# Example heading New

    <div class="card-body badge-heading">
     <h1>Example heading
       <span class="badge text-white rounded text-bg-secondary">New</span>
     </h1>
     <h2>Example heading
       <span class="badge text-white rounded text-bg-secondary">New</span>
     </h2>
     <h3>Example heading
       <span class="badge text-white rounded text-bg-secondary">New</span>
     </h3>
     <h4>Example heading
       <span class="badge text-white rounded text-bg-secondary">New</span>
     </h4>
     <h5>Example heading
       <span class="badge text-white rounded text-bg-secondary">New</span>
     </h5>
     <h6>Example heading
       <span class="badge text-white rounded text-bg-secondary">New</span>
     </h6>
    </div>

##### Positioned Badges

Use utilities to modify a `badge` and position it in the corner of a link or button.

    <div class="badge-flex">
     <button class="btn text-white rounded btn-primary relative" type="button">Inbox
       <span class="absolute text-[10px] left-[88%] top-[-5px] translate-middle badge rounded-full bg-danger">99+</span>
     </button>
     <button class="btn text-white rounded btn-primary relative" type="button">Inbox
       <span class="absolute text-[10px] left-[88%] top-[-5px] translate-middle badge rounded-full bg-danger">99+</span>
     </button>
     <button class="btn text-white rounded btn-info relative badge-square" type="button">
       <i class="fa-brands fa-twitter"></i>
       <span class="absolute text-[10px] left-[88%] top-[-5px] translate-middle badge rounded-full bg-danger">8</span>
     </button>
     <button class="btn text-white rounded btn-primary relative" type="button">Profile
       <span class="absolute text-[10px] left-[88%] top-[-5px] translate-middle bg-danger border border-light rounded-full badge-p-5">
         <span class="visually-hidden">New alerts</span>
       </span>
     </button>
     <button class="btn text-white rounded btn-info relative badge-square" type="button">
       <i class="fa-brands fa-linkedin-in"></i>
       <span class="absolute text-[10px] left-[88%] top-[-5px] translate-middle badge-p-5 bg-danger border border-light rounded-full">
         <span class="visually-hidden">New alerts</span>
       </span>
     </button>
     <button class="btn text-white rounded btn-success relative badge-square" type="button">
       <i class="fa-solid fa-comments"></i>
       <span class="absolute text-[10px] left-[88%] top-[-5px] translate-middle badge-p-5 bg-danger border border-light rounded-full">
         <span class="visually-hidden">New alerts</span>
       </span>
     </button>
     <button class="btn text-white rounded btn-info relative badge-square" type="button">
       <i class="fa-brands fa-twitter"></i>
       <span class="absolute text-[10px] left-[88%] top-[-5px] translate-middle badge-p-5 bg-danger border border-light rounded-full">
         <span class="visually-hidden">New alerts</span>
       </span>
     </button>
    </div>

##### Button Badges

`badge` can be used as part of links or buttons to provide a counter.

     <div class="badge-flex">
     <button class="btn btn-primary rounded">Notifications
       <span class="badge text-bg-danger ms-2">4</span>
     </button>
     <button class="btn button-light-primary rounded">Sale
       <span class="badge text-bg-danger rounded-full ms-2">9</span>
     </button>
     <button class="btn border-dashed-primary rounded">Instagram
       <span class="badge text-bg-danger ms-2">6</span>
     </button>
     <button class="btn btn-pill button-light-info txt-info rounded">LinkedIn
       <span class="badge text-bg-info rounded-full ms-2 txt-light">3</span>
     </button>
    </div>

##### Image Badges

Use`image-badges` class to set image sizes.

Primary Secondary Success Danger Warning Info Light Dark

     <div class="badge-spacing image-badges">
     <span class="badge common-align txt-primary  badge-l-primary rounded border border-primary">
       <img class="rounded me-1" src="../assets/images/dashboard-9/user/5.png" alt="user">Primary
     </span>
     <span class="badge common-align txt-secondary  badge-l-secondary rounded border border-secondary">
       <img class="rounded me-1" src="../assets/images/dashboard-9/user/2.png" alt="user">Secondary
     </span>
     <span class="badge common-align txt-success  badge-l-success rounded border border-success">
       <img class="rounded me-1" src="../assets/images/dashboard-9/user/3.png" alt="user">Success
     </span>
     <span class="badge common-align txt-danger  badge-l-danger rounded border border-danger">
       <img class="rounded me-1" src="../assets/images/dashboard-9/user/4.png" alt="user">Danger
     </span>
     <span class="badge common-align txt-warning badge-l-warning rounded border border-warning">
       <img class="rounded me-1" src="../assets/images/dashboard/user/11.jpg" alt="user">Warning
     </span>
     <span class="badge common-align txt-info rounded badge-l-info  border border-info">
       <img class="rounded me-1" src="../assets/images/dashboard/user/4.jpg" alt="user">Info
     </span>
     <span class="badge common-align txt-light rounded badge-l-light  border border-light">
       <img class="rounded me-1" src="../assets/images/dashboard/user/10.jpg" alt="user">Light
     </span>
     <span class="badge common-align txt-dark rounded badge-l-dark border border-dark">
       <img class="rounded me-1" src="../assets/images/dashboard/user/7.jpg" alt="user">Dark
     </span>
    </div>

##### Close Badges

Use`badge-l-*`classes to provide background-colors and `border-*` classes to provide border-colors.

Primary Secondary Success Danger Warning Info Light Dark

    <div class="badge-spacing image-badges">
     <span class="badge common-align txt-primary  badge-l-primary rounded-full border border-primary">Primary
       <a href="#!">
         <i class="ms-1 stroke-primary" data-feather="x-circle"></i>
       </a>
     </span>
     <span class="badge common-align txt-secondary  badge-l-secondary rounded-full border border-secondary">Secondary
       <a href="#!">
         <i class="ms-1 stroke-secondary" data-feather="x-circle"></i>
       </a>
     </span>
     <span class="badge common-align txt-success  badge-l-success rounded-full border border-success">Success
       <a href="#!">
         <i class="ms-1 stroke-success" data-feather="x-circle"></i>
       </a>
     </span>
     <span class="badge common-align txt-danger badge-l-danger rounded-full border border-danger">Danger
       <a href="#!">
         <i class="ms-1 stroke-danger" data-feather="x-circle"></i>
       </a>
     </span>
     <span class="badge common-align txt-warning badge-l-warning rounded-full border border-warning">Warning
       <a href="#!">
         <i class="ms-1 stroke-warning" data-feather="x-circle"></i>
       </a>
     </span>
     <span class="badge common-align txt-info badge-l-info rounded-full border border-info">Info
       <a href="#!">
         <i class="ms-1 stroke-info" data-feather="x-circle"></i>
       </a>
     </span>
     <span class="badge common-align txt-light badge-l-light rounded-full border border-light">Light
       <a href="#!">
         <i class="ms-1 stroke-light" data-feather="x-circle"></i>
       </a>
     </span>
     <span class="badge common-align txt-dark badge-l-dark rounded-full border border-dark">Dark
       <a href="#!">
         <i class="ms-1 stroke-dark" data-feather="x-circle"></i>
       </a>
     </span>
    </div>

##### Image with Close Badges

Use`badge-l-*` classes to provide background-color. and `vr` classes to partitions.

Primary Secondary Success Danger Warning Info Light Dark

     <div class="badge-spacing image-badges">
     <span class="badge common-align txt-primary  badge-l-primary rounded-full border border-primary">
       <img class="rounded-full me-1" src="../assets/images/dashboard/user/1.jpg" alt="user">Primary
       <span class="vr mx-2"></span>
       <a href="#!">
         <i class="stroke-primary" data-feather="x-circle"></i>
       </a>
     </span>
     <span class="badge common-align txt-secondary rounded-full badge-l-secondary  border border-secondary">
       <img class="rounded-full me-1" src="../assets/images/dashboard/user/2.jpg" alt="user">Secondary
       <span class="vr mx-2"></span>
       <a href="#!">
         <i class="stroke-secondary" data-feather="x-circle"></i>
       </a>
     </span>
     <span class="badge common-align txt-success rounded-full badge-l-success border border-success">
       <img class="rounded-full me-1" src="../assets/images/dashboard/user/3.jpg" alt="user">Success
       <span class="vr mx-2"></span>
       <a href="#!">
         <i class="stroke-success" data-feather="x-circle"></i>
       </a>
     </span>
     <span class="badge common-align txt-danger rounded-full badge-l-danger  border border-danger">
       <img class="rounded-full me-1" src="../assets/images/dashboard/user/5.jpg" alt="user">Danger
       <span class="vr mx-2"></span>
       <a href="#!">
         <i class="stroke-danger" data-feather="x-circle"></i>
       </a>
     </span>
     <span class="badge common-align txt-warning  badge-l-warning rounded-full border border-warning">
       <img class="rounded-full me-1" src="../assets/images/dashboard/user/6.jpg" alt="user">Warning
       <span class="vr mx-2"></span>
       <a href="#!">
         <i class="stroke-warning" data-feather="x-circle"></i>
       </a>
     </span>
     <span class="badge common-align txt-info rounded-full badge-l-info  border border-info">
       <img class="rounded-full me-1" src="../assets/images/dashboard/user/12.jpg" alt="user">Info
       <span class="vr mx-2"></span>
       <a href="#!">
         <i class="stroke-info" data-feather="x-circle"></i>
       </a>
     </span>
     <span class="badge common-align txt-light rounded-full badge-l-light  border border-light">
       <img class="rounded-full me-1" src="../assets/images/user/3.png" alt="user">Light
       <span class="vr mx-2"></span>
       <a href="#!">
         <i class="stroke-light" data-feather="x-circle"></i>
       </a>
     </span>
     <span class="badge common-align txt-dark rounded-full badge-l-dark  border border-dark">
       <img class="rounded-full me-1" src="../assets/images/user/6.jpg" alt="user">Dark
       <span class="vr mx-2"></span>
       <a href="#!">
         <i class="stroke-dark" data-feather="x-circle"></i>
       </a>
     </span>
    </div>