Home Components Colors Typography Blog Blocks
Peacock Home Components Colors Typography Blog Blocks Direction Theme

Badge

The badge component is used to display a small amount of information to the user.

Usage



  <div class="badge-wrapper">
    <wc-icon name="notifications"></wc-icon>
    <wc-badge class="badge-anchor-simple"></wc-badge>
  </div>

  <div class="badge-wrapper">
    <wc-icon name="notifications"></wc-icon>
    <wc-badge class="badge-anchor" value="1"></wc-badge>
  </div>

  <div class="badge-wrapper">
    <wc-icon name="notifications"></wc-icon>
    <wc-badge class="badge-anchor" value="999+"></wc-badge>
  </div>

  <style>
    .badge-wrapper {
      position: relative;
      display: inline-flex;
      width: 1.5rem;
      height: 1.5rem;
      align-items: center;
      justify-content: center;
    }

    .badge-anchor-simple {
      position: absolute;
      top: 0;
      right: 0;
    }

    .badge-anchor {
      position: absolute;
      top: -2px;
      left: calc(100% - 12px);
    }
  </style>

API Reference

Properties

CSS Custom Properties

On this page

Badge

Sponsor