Badge
Badges are inline block elements that usually appear near another element. They can be used as a notification that there are additional items associated with an element.
Inside a
.badge-wrapper
div, add an svg/img and a span with class
.badge
.
Wrap an svg/img inside a
.badge-wrapper
div and add a span with class
.badge
.
10+

  <div className="badge-wrapper">
    <svg
      aria-hidden="true"
      className="icon-md fill-black"
      focusable="false"
      viewBox="0 0 24 24"
    >
      <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" />
    </svg>
    <span className="badge bg-blue-600 text-white">
      10+
    </span>
  </div>
To change the size add
.badge--sm
,
.badge--md
(default) or
.badge--lg
. Also add corresponding icon class from the utility classes.
1

  <div className="badge-wrapper">
    <svg
      aria-hidden="true"
      className="icon-sm fill-black"
      focusable="false"
      viewBox="0 0 24 24"
    >
      <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z" />
    </svg>
    <span className="badge badge--sm bg-blue-600 text-white">
      1
    </span>
  </div>
To use a badge without text use class
.badge-dot
instead of
.badge
in the span element.

  <div className="badge-wrapper">
    <svg
      aria-hidden="true"
      className="icon-md fill-black"
      focusable="false"
      viewBox="0 0 24 24"
    >
      <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z" />
    </svg>
    <span className="badge-dot bg-blue-600 border-color-white" />
  </div>
To change the alignment from top-left(default) to bottom-left add
.badge--bottom
class to
.badge
.
1

  <div className="badge-wrapper">
    <svg
      aria-hidden="true"
      className="icon-md fill-black"
      focusable="false"
      viewBox="0 0 24 24"
    >
      <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z" />
    </svg>
    <span className="badge badge--bottom bg-blue-600 text-white">
      1
    </span>
  </div>
To add badge to avatar, add
.badge-wrapper
class to
.avatar
div. Then add span inside with
.badge
class.
2

  <div className="badge-wrapper avatar">
    <img
      alt=""
      src="/avatar.1a5c1c50.jpeg"
    />
    <span className="badge badge--md bg-blue-600 text-white">
      2
    </span>
  </div>
To get the dot variant just replace
.badge
with
.badge-dot
.

  <div className="badge-wrapper avatar">
    <img
      alt=""
      src="/avatar.1a5c1c50.jpeg"
    />
    <span className="badge-dot badge-dot--md bg-blue-600 border-color-white" />
  </div>
On this page