logologo

Tag & Pills

Badges contextual variations

Use the.badgeutility class to make more badges.

PrimarySecondaryTertiarySuccessInfoWarningDangerLightDark
<!--You can use badge-* class through change the colors of badges (primary/secondary/success...).-->
<span  class="badge badge-primary">Primary</span>
<span  class="badge badge-secondary">Secondary</span>
<span  class="badge badge-tertiary">Tertiary</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 text-dark">Light</span>
<span  class="badge badge-dark tag-pills-sm-mb">Dark</span>

Pills contextual variations

Use the.rounded-pill utility class to make badges more rounded.

PrimarySecondaryTertiarySuccessInfoWarningDangerLightDark
<!--You can use .rounded-pill class through change the rounded badges (rounded-pill).-->
<span  class="badge badge-primary rounded-pill">Primary</span>
<span  class="badge badge-secondary rounded-pill">Secondary</span>
<span  class="badge badge-tertiary rounded-pill">Tertiary</span>
<span  class="badge badge-success rounded-pill">Success</span>
<span  class="badge badge-info rounded-pill">Info</span>
<span  class="badge badge-warning rounded-pill">Warning</span>
<span  class="badge badge-danger rounded-pill">Danger</span>
<span  class="badge badge-light text-dark rounded-pill">Light</span>
<span  class="badge badge-dark tag-pills-sm-mb rounded-pill">Dark</span>

Number of badge

Use the.badge utility class to make badges more rounded with a larger border-radius.

123456789
<!--You can use badge-* class through make badges (Numbered Badges).-->
< span class="badge badge-primary">1</span>
< span class="badge badge-secondary">2</span>
< span class="badge badge-tertiary">3</span>
< span class="badge badge-success">4</span>
< span class="badge badge-info">5</span>
< span class="badge badge-warning">6</span>
< span class="badge badge-danger">7</span>
< span class="badge badge-light text-dark">8</span>
< span class="badge badge-dark tag-pills-sm-mb">9</span>

Number of pills tags

Use the.rounded-pill utility class to make badges more rounded with a larger border-radius.

123456789
<!--You can use .rounded-circle class through change the circled badges (rounded-circle).-->
< span class="badge badge-primary rounded-pill badge-p-space">1</span>
< span class="badge badge-secondary rounded-pill badge-p-space">2</span>
< span class="badge badge-tertiary rounded-pill badge-p-space">3</span>
< span class="badge badge-success rounded-pill badge-p-space">4</span>
< span class="badge badge-info rounded-pill badge-p-space">5</span>
< span class="badge badge-warning rounded-pill badge-p-space">6</span>
< span class="badge badge-danger rounded-pill badge-p-space">7</span>
< span class="badge badge-light text-dark rounded-pill badge-p-space">8</span>
< span class="badge badge-dark tag-pills-sm-mb rounded-pill badge-p-space">9</span>

Badge tags with icons

Use the.badge utility class to make more icons.

<!--You can use data-feather icons through change the icons badges.-->
< a class="badge b-ln-height badge-primary p-2" href="#">
< svg class="feather">
< use href="../assets/svg/feather-icons/dist/feather-sprite.svg#activity"></use></svg></a>
< a class="badge b-ln-height badge-secondary p-2" href="#">
< svg class="feather">
< use href="../assets/svg/feather-icons/dist/feather-sprite.svg#headphones"></use></svg></a>
< a class="badge b-ln-height badge-tertiary p-2" href="#">
< svg class="feather">
< use href="../assets/svg/feather-icons/dist/feather-sprite.svg#link"></use></svg></a>
< a class="badge b-ln-height badge-success p-2" href="#">
< svg class="feather">
< use href="../assets/svg/feather-icons/dist/feather-sprite.svg#github"></use></svg></a>
< a class="badge b-ln-height badge-info p-2" href="#">
< svg class="feather">
< use href="../assets/svg/feather-icons/dist/feather-sprite.svg#award"></use></svg></a>
< a class="badge b-ln-height badge-warning p-2" href="#">
< svg class="feather">
< use href="../assets/svg/feather-icons/dist/feather-sprite.svg#dollar-sign"></use></svg></a>
< a class="badge b-ln-height badge-danger p-2" href="#">
< svg class="feather">
< use href="../assets/svg/feather-icons/dist/feather-sprite.svg#heart"></use></svg></a>
< a class="badge b-ln-height badge-light text-dark p-2" href="#">
< svg class="feather">
< use href="../assets/svg/feather-icons/dist/feather-sprite.svg#mail"></use></svg></a>
< a class="badge b-ln-height badge-dark p-2" href="#">
< svg class="feather">
< use href="../assets/svg/feather-icons/dist/feather-sprite.svg#airplay"></use></svg></a>

Rounded pills with icons

Use the.badge utility class to make more icons.

<!--You can use .rounded-circle class through change the icons badge.-->
< a class="badge b-ln-height badge-primary rounded-pill p-2" href="#">
< svg class="feather">< svg href="../assets/svg/feather-icons/dist/feather-sprite.svg#activity"></ use></svg></ a>| < a class="badge b-ln-height badge-secondary rounded-pill p-2" href="#">
< svg class="feather">< svg href="../assets/svg/feather-icons/dist/feather-sprite.svg#headphones"></ use></svg></ a>| < a class="badge b-ln-height badge-tertiary rounded-pill p-2" href="#">
< svg class="feather">< svg href="../assets/svg/feather-icons/dist/feather-sprite.svg#link"></ use></svg></ a>| < a class="badge b-ln-height badge-success rounded-pill p-2" href="#">
< svg class="feather">< svg href="../assets/svg/feather-icons/dist/feather-sprite.svg#github"></ use></svg></ a>| < a class="badge b-ln-height badge-info rounded-pill p-2" href="#">
< svg class="feather">< svg href="../assets/svg/feather-icons/dist/feather-sprite.svg#award"></ use></svg></ a>| < a class="badge b-ln-height badge-warning rounded-pill p-2" href="#">
< svg class="feather">< svg href="../assets/svg/feather-icons/dist/feather-sprite.svg#dollar-sign"></ use></svg></ a>| < a class="badge b-ln-height badge-danger rounded-pill p-2" href="#">
< svg class="feather">< svg href="../assets/svg/feather-icons/dist/feather-sprite.svg#heart"></ use></svg></ a>| < a class="badge b-ln-height badge-light text-dark rounded-pill p-2" href="#">
< svg class="feather">< svg href="../assets/svg/feather-icons/dist/feather-sprite.svg#mail"></ use></svg></ a>| < a class="badge b-ln-height badge-dark rounded-pill p-2" href="#">
< svg class="feather">< svg href="../assets/svg/feather-icons/dist/feather-sprite.svg#airplay"></ use></svg></ a>

Touchspin Badges

Use.main-touchspin,.increment-touchspinfor change the value.

3 
<!--You can use .main-touchspin,.increment-touchspin', 'for change the value.-->
< div class="touchspin-wrapper">
< div class="menu-icon">
< svg class="svg-w-20 stroke-dark">
< use href="../assets/svg/iconly-sprite.svg#Bell"></use></svg></div>
< span class="badge badge-primary main-touchspin" id="inputData1">3</span>
< button class="decrement-touchspin btn-touchspin btn-outline-primary">
< svg class="svg-w-16 stroke-dark">
< use href="../assets/svg/iconly-sprite.svg#minus"></use></svg></button>
< button class="increment-touchspin btn-touchspin btn-outline-primary">
< svg class="svg-w-16 stroke-dark">
< use href="../assets/svg/iconly-sprite.svg#plus"></use></svg></button></div>

Animated Badges

Use the.bg-common-*, animated-badge, .dote-*for add animation on badges.

<!--You can use .bg-common-*, animated-badge, .dote-*', 'for add animation on badges.-->
<li class="bg-common-primary">
<span class="dote-primary"></span>
<svgclass="svg-w-20">
<use href="../assets/svg/iconly-sprite.svg#Home"></use> </svg></li>
<li class="bg-common-secondary">
<span class="dote-secondary"></span>
<svgclass="svg-w-20">
<use href="../assets/svg/iconly-sprite.svg#Star"></use></svg></li>
<li class="bg-common-tertiary">
<span class="dote-tertiary"></span>
<svgclass="svg-w-20">
<use href="../assets/svg/iconly-sprite.svg#Bag"></use></svg></li>
<li class="bg-common-info">
<span class="dote-info"></span>
<svgclass="svg-w-20">
<use href="../assets/svg/iconly-sprite.svg#Bell"></use> </svg></li>

Center Badges

Use the.badge, .badge-* , center-badgefor center mode badges.

  • New
  • Update
  • Latest
  • Error 
<!--You can use .badge, .badge-* , center-badge', 'for center mode badges.-->
<li class="border-info">
<span class="badge badge-info">New</span>
<svg class="svg-w-24 stroke-info">
<use href="../assets/svg/iconly-sprite.svg#Category"></use></svg></li>
<li class="border-success">
<span class="badge badge-success">Update</span>
<svg class="svg-w-24 stroke-success">
<use href="../assets/svg/iconly-sprite.svg#Chart"></use></svg></li>
<li class="border-primary">
<span class="badge badge-primary">Latest</span>
<svg class="svg-w-24 stroke-primary">
<use href="../assets/svg/iconly-sprite.svg#Ticket-star"></use></svg></li>
<li class="border-danger">
<span class="badge badge-danger">Error</span>
<svg class="svg-w-24 stroke-danger">
<use href="../assets/svg/iconly-sprite.svg#Danger"></use></svg></li>

Badge headings example

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

Badge Heading 1Latest

Badge Heading 2Trending

Badge Heading 3Checkout

Badge Heading 4New

Badge Heading 5Inbox
Badge Heading 6Login

Badge ParagraphLogout

<!--You can use headings with .badge class.-->
<h1 class="badge-heading">Badge Heading 1<span class="badge badge-primary">Latest</span></h1>
<h2 class="badge-heading">Badge Heading 2<span class="badge badge-secondary">Trending</span></h2>
<h3 class="badge-heading">Badge Heading 3<span class="badge badge-success">Checkout</span></h3>
<h4 class="badge-heading">Badge Heading 4<span class="badge badge-warning">Inbox</span></h4>
<h5 class="badge-heading">Badge Heading 5<span class="badge badge-danger">Login</span></h5>
<h6 class="badge-heading pb-0">Badge Heading 6<span class="badge badge-dark">Logout</span></h6>

Badges as part buttons

All html button,.btn , .badgeare available.

<!--You can use badge-* class with any icons used.(badge-icons/headings).-->
<div class="badge-spacing flex-column align-items-start">
<button class="btn btn-primary d-flex align-items-center" type="button">Messages <span class="badge rounded-circle btn-p-space badge-light text-dark ms-2"><i data-feather="mail"></i></span></button>
<button class="btn btn-secondary d-flex align-items-center" type="button">Notifications <span class="badge rounded-circle btn-p-space badge-light text-dark ms-2"><i data-feather="bell"></i></span></button>
<button class="btn btn-success d-flex align-items-center" type="button">Update available <span class="badge rounded-circle btn-p-space badge-light text-dark ms-2"><i data-feather="settings"></i></span></button>
<button class="btn btn-info d-flex align-items-center" type="button">Playing Now <span class="badge rounded-circle btn-p-space badge-light text-dark ms-2"><i data-feather="music"></i></span></button>
<button class="btn btn-warning text-dark d-flex align-items-center" type="button">1.2 GB Used <span class="badge rounded-circle btn-p-space badge-light text-dark ms-2"><i data-feather="alert-triangle"></i></span></button>