Badge

VISPA-UI includes an expertly-crafted 14 varieties of Badges which can make your UI building experience effortless.

Basic Badge

To use the Badge component you can use the badge class to the span.

1228+

              
              
<span class="badge__container">
  <button>Button</button>
  <span class="badge">1228+</span>
</span>

Toggle Badge

To use the Toggle Badge component you can use the badge ID to the badge. The toggle badge removes the badge when the button is clicked.

              
              
<span class="badge__container">
  <button id="bdg-hide-btn">Hide</button>
  <span class="badge" id="badge">7+</span>
</span>

<!-- JavaScript -->
<script>
  const bdgHideBtn = document.getElementById("bdg-hide-btn");
  const badgeContent = document.getElementById("badge");

  let isVisible = true;

  bdgHideBtn.addEventListener("click", () => {
    badgeContent.style.display = !isVisible ? "flex" : "none";
    isVisible = !isVisible;
  });
</script>

Icon Badge

To use the Icon Badge component you can use the badge class to the span along with the icon.

              
              
<span class="badge__container">
  <img class="icon-xl" src="#">
  <span class="badge">15</span>
</span>

Profile Badge

Large Badge

To use the Large Profile Badge component you can use the badge__profile bdg-lg classes to the span.

              
              
<span class="badge__container">
  <img src="#">
  <span class="badge badge__profile bdg-lg"></span>
</span>

Medium Badge

To use the Medium Profile Badge component you can use the badge__profile class to the span.

              
              
<span class="badge__container">
  <img src="#">
  <span class="badge badge__profile"></span>
</span>

Small Badge

To use the Small Profile Badge component you can use the badge__profile bdg-sm classes to the span.

              
              
<span class="badge__container">
  <img src="#">
  <span class="badge badge__profile bdg-sm"></span>
</span>

Primary Badge

To use the Primary Badge component you can use the bdg-primary class to the span.

              
              
<span class="badge__container">
  <img src="#">
  <span class="badge bdg-primary"></span>
</span>

Danger Badge

To use the Danger Badge component you can use the bdg-danger class to the span.

              
              
<span class="badge__container">
  <img src="#">
  <span class="badge bdg-danger"></span>
</span>

Success Badge

To use the Success Badge component you can use the bdg-success class to the span.

              
              
<span class="badge__container">
  <img src="#">
  <span class="badge bdg-success"></span>
</span>

Warning Badge

To use the Warning Badge component you can use the bdg-warning class to the span.

              
              
<span class="badge__container">
  <img src="#">
  <span class="badge bdg-warning"></span>
</span>

Dark Badge

To use the Dark Badge component you can use the bdg-dark class to the span.

              
              
<span class="badge__container">
  <img src="#">
  <span class="badge bdg-dark"></span>
</span>