BLACK FRIDAY SPECIAL!
Apply Coupon:BLFCM2022to Get 50% Flat Discount!🔥
Label Style 1
<ul class="d-flex flex-wrap mb-4">
   <li class="me-3 mb-3">
      <label class="label primary-label"> Std Label </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label primary-label-outline"> Std Label </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label primary-label rounded-full">
      Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label primary-label-outline rounded-full">
      Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label primary-label icon-left">
      <i class="lni lni-play"></i> Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label primary-label-outline icon-left">
      <i class="lni lni-play"></i> Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label primary-label rounded-full icon-left">
      <i class="lni lni-play"></i>
      Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label
         class="label primary-label-outline rounded-full icon-left"
         >
      <i class="lni lni-play"></i>
      Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label primary-label icon-right">
      Std Label <i class="lni lni-play"></i>
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label primary-label-outline icon-right">
      Std Label <i class="lni lni-play"></i>
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label primary-label rounded-full icon-right">
      Std Label <i class="lni lni-play"></i>
      </label>
   </li>
   <li class="me-3 mb-3">
      <label
         class="label primary-label-outline rounded-full icon-right"
         >
      Std Label <i class="lni lni-play"></i>
      </label>
   </li>
</ul>
.label {
  font-size: 14px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 2px;
  display: inline-block;
  border: 1px solid transparent;
  background: transparent;
}
.label.rounded-full {
  border-radius: 50px;
  padding: 4px 12px;
}
.label.icon-left i {
  padding-right: 6px;
}
.label.icon-right i {
  padding-left: 6px;
}
.label.primary-label {
  background: var(--primary);
  color: var(--white);
}
.label.primary-label-outline {
  color: var(--primary);
  border-color: var(--primary);
}
Label Style 2
<ul class="d-flex flex-wrap mb-4">
   <li class="me-3 mb-3">
      <label class="label success-label"> Std Label </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label success-label-outline"> Std Label </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label success-label rounded-full">
      Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label success-label-outline rounded-full">
      Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label success-label icon-left">
      <i class="lni lni-play"></i> Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label success-label-outline icon-left">
      <i class="lni lni-play"></i> Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label success-label rounded-full icon-left">
      <i class="lni lni-play"></i>
      Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label
         class="label success-label-outline rounded-full icon-left"
         >
      <i class="lni lni-play"></i>
      Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label success-label icon-right">
      Std Label <i class="lni lni-play"></i>
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label success-label-outline icon-right">
      Std Label <i class="lni lni-play"></i>
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label success-label rounded-full icon-right">
      Std Label <i class="lni lni-play"></i>
      </label>
   </li>
   <li class="me-3 mb-3">
      <label
         class="label success-label-outline rounded-full icon-right"
         >
      Std Label <i class="lni lni-play"></i>
      </label>
   </li>
</ul>
.label {
  font-size: 14px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 2px;
  display: inline-block;
  border: 1px solid transparent;
  background: transparent;
}
.label.rounded-full {
  border-radius: 50px;
  padding: 4px 12px;
}
.label.icon-left i {
  padding-right: 6px;
}
.label.icon-right i {
  padding-left: 6px;
}
.label.success-label {
  background: var(--success);
  color: var(--white);
}
.label.success-label-outline {
  color: var(--success);
  border-color: var(--success);
}
Label Style 3
<ul class="d-flex flex-wrap mb-4">
   <li class="me-3 mb-3">
      <label class="label info-label"> Std Label </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label info-label-outline"> Std Label </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label info-label rounded-full">
      Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label info-label-outline rounded-full">
      Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label info-label icon-left">
      <i class="lni lni-play"></i> Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label info-label-outline icon-left">
      <i class="lni lni-play"></i> Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label info-label rounded-full icon-left">
      <i class="lni lni-play"></i>
      Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label
         class="label info-label-outline rounded-full icon-left"
         >
      <i class="lni lni-play"></i>
      Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label info-label icon-right">
      Std Label <i class="lni lni-play"></i>
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label info-label-outline icon-right">
      Std Label <i class="lni lni-play"></i>
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label info-label rounded-full icon-right">
      Std Label <i class="lni lni-play"></i>
      </label>
   </li>
   <li class="me-3 mb-3">
      <label
         class="label info-label-outline rounded-full icon-right"
         >
      Std Label <i class="lni lni-play"></i>
      </label>
   </li>
</ul>
.label {
  font-size: 14px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 2px;
  display: inline-block;
  border: 1px solid transparent;
  background: transparent;
}
.label.rounded-full {
  border-radius: 50px;
  padding: 4px 12px;
}
.label.icon-left i {
  padding-right: 6px;
}
.label.icon-right i {
  padding-left: 6px;
}
.label.info-label {
  background: var(--info);
  color: var(--white);
}
.label.info-label-outline {
  color: var(--info);
  border-color: var(--info);
}
Label Style 4
<ul class="d-flex flex-wrap mb-4">
   <li class="me-3 mb-3">
      <label class="label caution-label"> Std Label </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label caution-label-outline"> Std Label </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label caution-label rounded-full">
      Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label caution-label-outline rounded-full">
      Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label caution-label icon-left">
      <i class="lni lni-play"></i> Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label caution-label-outline icon-left">
      <i class="lni lni-play"></i> Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label caution-label rounded-full icon-left">
      <i class="lni lni-play"></i>
      Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label
         class="label caution-label-outline rounded-full icon-left"
         >
      <i class="lni lni-play"></i>
      Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label caution-label icon-right">
      Std Label <i class="lni lni-play"></i>
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label caution-label-outline icon-right">
      Std Label <i class="lni lni-play"></i>
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label caution-label rounded-full icon-right">
      Std Label <i class="lni lni-play"></i>
      </label>
   </li>
   <li class="me-3 mb-3">
      <label
         class="label caution-label-outline rounded-full icon-right"
         >
      Std Label <i class="lni lni-play"></i>
      </label>
   </li>
</ul>
.label {
  font-size: 14px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 2px;
  display: inline-block;
  border: 1px solid transparent;
  background: transparent;
}
.label.rounded-full {
  border-radius: 50px;
  padding: 4px 12px;
}
.label.icon-left i {
  padding-right: 6px;
}
.label.icon-right i {
  padding-left: 6px;
}
.label.caution-label {
  background: var(--caution);
  color: var(--white);
}
.label.caution-label-outline {
  color: var(--caution);
  border-color: var(--caution);
}
Label Style 5
<ul class="d-flex flex-wrap mb-4">
   <li class="me-3 mb-3">
      <label class="label error-label"> Std Label </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label error-label-outline"> Std Label </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label error-label rounded-full">
      Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label error-label-outline rounded-full">
      Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label error-label icon-left">
      <i class="lni lni-play"></i> Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label error-label-outline icon-left">
      <i class="lni lni-play"></i> Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label error-label rounded-full icon-left">
      <i class="lni lni-play"></i>
      Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label
         class="label error-label-outline rounded-full icon-left"
         >
      <i class="lni lni-play"></i>
      Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label error-label icon-right">
      Std Label <i class="lni lni-play"></i>
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label error-label-outline icon-right">
      Std Label <i class="lni lni-play"></i>
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label error-label rounded-full icon-right">
      Std Label <i class="lni lni-play"></i>
      </label>
   </li>
   <li class="me-3 mb-3">
      <label
         class="label error-label-outline rounded-full icon-right"
         >
      Std Label <i class="lni lni-play"></i>
      </label>
   </li>
</ul>
.label {
  font-size: 14px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 2px;
  display: inline-block;
  border: 1px solid transparent;
  background: transparent;
}
.label.rounded-full {
  border-radius: 50px;
  padding: 4px 12px;
}
.label.icon-left i {
  padding-right: 6px;
}
.label.icon-right i {
  padding-left: 6px;
}
.label.error-label {
  background: var(--error);
  color: var(--white);
}
.label.error-label-outline {
  color: var(--error);
  border-color: var(--error);
}
Label Style 6
<ul class="d-flex flex-wrap mb-4">
   <li class="me-3 mb-3">
      <label class="label accent-label"> Std Label </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label accent-label-outline"> Std Label </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label accent-label rounded-full">
      Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label accent-label-outline rounded-full">
      Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label accent-label icon-left">
      <i class="lni lni-play"></i> Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label accent-label-outline icon-left">
      <i class="lni lni-play"></i> Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label accent-label rounded-full icon-left">
      <i class="lni lni-play"></i>
      Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label
         class="label accent-label-outline rounded-full icon-left"
         >
      <i class="lni lni-play"></i>
      Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label accent-label icon-right">
      Std Label <i class="lni lni-play"></i>
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label accent-label-outline icon-right">
      Std Label <i class="lni lni-play"></i>
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label accent-label rounded-full icon-right">
      Std Label <i class="lni lni-play"></i>
      </label>
   </li>
   <li class="me-3 mb-3">
      <label
         class="label accent-label-outline rounded-full icon-right"
         >
      Std Label <i class="lni lni-play"></i>
      </label>
   </li>
</ul>
.label {
  font-size: 14px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 2px;
  display: inline-block;
  border: 1px solid transparent;
  background: transparent;
}
.label.rounded-full {
  border-radius: 50px;
  padding: 4px 12px;
}
.label.icon-left i {
  padding-right: 6px;
}
.label.icon-right i {
  padding-left: 6px;
}
.label.accent-label {
  background: var(--accent);
  color: var(--white);
}
.label.accent-label-outline {
  color: var(--accent);
  border-color: var(--accent);
}
Label Style 7
<ul class="d-flex flex-wrap mb-4">
   <li class="me-3 mb-3">
      <label class="label secondary-label"> Std Label </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label secondary-label-outline">
      Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label secondary-label rounded-full">
      Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label secondary-label-outline rounded-full">
      Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label secondary-label icon-left">
      <i class="lni lni-play"></i> Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label secondary-label-outline icon-left">
      <i class="lni lni-play"></i> Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label secondary-label rounded-full icon-left">
      <i class="lni lni-play"></i>
      Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label
         class="label secondary-label-outline rounded-full icon-left"
         >
      <i class="lni lni-play"></i>
      Std Label
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label secondary-label icon-right">
      Std Label <i class="lni lni-play"></i>
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label secondary-label-outline icon-right">
      Std Label <i class="lni lni-play"></i>
      </label>
   </li>
   <li class="me-3 mb-3">
      <label class="label secondary-label rounded-full icon-right">
      Std Label <i class="lni lni-play"></i>
      </label>
   </li>
   <li class="me-3 mb-3">
      <label
         class="
         label
         secondary-label-outline
         rounded-full
         icon-right
         "
         >
      Std Label <i class="lni lni-play"></i>
      </label>
   </li>
</ul>
.label {
  font-size: 14px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 2px;
  display: inline-block;
  border: 1px solid transparent;
  background: transparent;
}
.label.rounded-full {
  border-radius: 50px;
  padding: 4px 12px;
}
.label.icon-left i {
  padding-right: 6px;
}
.label.icon-right i {
  padding-left: 6px;
}
.label.secondary-label {
  background: var(--secondary);
  color: var(--white);
}
.label.secondary-label-outline {
  color: var(--secondary);
  border-color: var(--secondary);
}