Components

Badge

A badge is a small status indicator that can be placed on other elements.

.ui-badge
Container element. Also takes .ui-anchor.
& > :first-child
The element the badge is anchored to.
.ui-badge-indicator
The indicator, inside .ui-anchor-floating.

Variants

Default, and .ui-dot.

HTML

<span class="ui-anchor ui-badge">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 32 32"
  >
    <path
      fill="currentColor"
      d="M2.004 9.303A4.5 4.5 0 0 1 6.5 5h19a4.5 4.5 0 0 1 4.496 4.303l-1.476.82L16 16.864L3.48 10.123zM2 11.588V22.5A4.5 4.5 0 0 0 6.5 27h19a4.5 4.5 0 0 0 4.5-4.5V11.588l-.526.293l-13 7a1 1 0 0 1-.948 0L2.514 11.874z"
    ></path>
  </svg>
  <span class="ui-anchor-floating">
    <span class="ui-badge-indicator" aria-label="5">5</span>
  </span>
</span>

<span class="ui-anchor ui-badge ui-dot">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 32 32"
  >
    <path
      fill="currentColor"
      d="M2.004 9.303A4.5 4.5 0 0 1 6.5 5h19a4.5 4.5 0 0 1 4.496 4.303l-1.476.82L16 16.864L3.48 10.123zM2 11.588V22.5A4.5 4.5 0 0 0 6.5 27h19a4.5 4.5 0 0 0 4.5-4.5V11.588l-.526.293l-13 7a1 1 0 0 1-.948 0L2.514 11.874z"
    ></path>
  </svg>
  <span class="ui-anchor-floating">
    <span class="ui-badge-indicator"></span>
  </span>
</span>

Indicator

Put indicator text inside .ui-badge-indicator. The anchored element is the badge's direct child before .ui-anchor-floating.

5 99+

HTML

<span class="ui-anchor ui-badge">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 32 32"
  >
    <path
      fill="currentColor"
      d="M2.004 9.303A4.5 4.5 0 0 1 6.5 5h19a4.5 4.5 0 0 1 4.496 4.303l-1.476.82L16 16.864L3.48 10.123zM2 11.588V22.5A4.5 4.5 0 0 0 6.5 27h19a4.5 4.5 0 0 0 4.5-4.5V11.588l-.526.293l-13 7a1 1 0 0 1-.948 0L2.514 11.874z"
    ></path>
  </svg>
  <span class="ui-anchor-floating">
    <span class="ui-badge-indicator" aria-label="5">5</span>
  </span>
</span>

<span class="ui-anchor ui-badge">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 32 32"
  >
    <path
      fill="currentColor"
      d="M2.004 9.303A4.5 4.5 0 0 1 6.5 5h19a4.5 4.5 0 0 1 4.496 4.303l-1.476.82L16 16.864L3.48 10.123zM2 11.588V22.5A4.5 4.5 0 0 0 6.5 27h19a4.5 4.5 0 0 0 4.5-4.5V11.588l-.526.293l-13 7a1 1 0 0 1-.948 0L2.514 11.874z"
    ></path>
  </svg>
  <span class="ui-anchor-floating">
    <span class="ui-badge-indicator">99+</span>
  </span>
</span>

Severities

.ui-critical, .ui-info, .ui-neutral,.ui-success, .ui-warning.

5 5 5 5 5

HTML

<span class="ui-anchor ui-badge ui-critical">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 32 32"
  >
    <path
      fill="currentColor"
      d="M2.004 9.303A4.5 4.5 0 0 1 6.5 5h19a4.5 4.5 0 0 1 4.496 4.303l-1.476.82L16 16.864L3.48 10.123zM2 11.588V22.5A4.5 4.5 0 0 0 6.5 27h19a4.5 4.5 0 0 0 4.5-4.5V11.588l-.526.293l-13 7a1 1 0 0 1-.948 0L2.514 11.874z"
    ></path>
  </svg>
  <span class="ui-anchor-floating">
    <span class="ui-badge-indicator" aria-label="5">5</span>
  </span>
</span>

<span class="ui-anchor ui-badge ui-info">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 32 32"
  >
    <path
      fill="currentColor"
      d="M2.004 9.303A4.5 4.5 0 0 1 6.5 5h19a4.5 4.5 0 0 1 4.496 4.303l-1.476.82L16 16.864L3.48 10.123zM2 11.588V22.5A4.5 4.5 0 0 0 6.5 27h19a4.5 4.5 0 0 0 4.5-4.5V11.588l-.526.293l-13 7a1 1 0 0 1-.948 0L2.514 11.874z"
    ></path>
  </svg>
  <span class="ui-anchor-floating">
    <span class="ui-badge-indicator" aria-label="5">5</span>
  </span>
</span>

<span class="ui-anchor ui-badge ui-success">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 32 32"
  >
    <path
      fill="currentColor"
      d="M2.004 9.303A4.5 4.5 0 0 1 6.5 5h19a4.5 4.5 0 0 1 4.496 4.303l-1.476.82L16 16.864L3.48 10.123zM2 11.588V22.5A4.5 4.5 0 0 0 6.5 27h19a4.5 4.5 0 0 0 4.5-4.5V11.588l-.526.293l-13 7a1 1 0 0 1-.948 0L2.514 11.874z"
    ></path>
  </svg>
  <span class="ui-anchor-floating">
    <span class="ui-badge-indicator" aria-label="5">5</span>
  </span>
</span>

<span class="ui-anchor ui-badge ui-warning">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 32 32"
  >
    <path
      fill="currentColor"
      d="M2.004 9.303A4.5 4.5 0 0 1 6.5 5h19a4.5 4.5 0 0 1 4.496 4.303l-1.476.82L16 16.864L3.48 10.123zM2 11.588V22.5A4.5 4.5 0 0 0 6.5 27h19a4.5 4.5 0 0 0 4.5-4.5V11.588l-.526.293l-13 7a1 1 0 0 1-.948 0L2.514 11.874z"
    ></path>
  </svg>
  <span class="ui-anchor-floating">
    <span class="ui-badge-indicator" aria-label="5">5</span>
  </span>
</span>

<span class="ui-anchor ui-badge ui-neutral">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 32 32"
  >
    <path
      fill="currentColor"
      d="M2.004 9.303A4.5 4.5 0 0 1 6.5 5h19a4.5 4.5 0 0 1 4.496 4.303l-1.476.82L16 16.864L3.48 10.123zM2 11.588V22.5A4.5 4.5 0 0 0 6.5 27h19a4.5 4.5 0 0 0 4.5-4.5V11.588l-.526.293l-13 7a1 1 0 0 1-.948 0L2.514 11.874z"
    ></path>
  </svg>
  <span class="ui-anchor-floating">
    <span class="ui-badge-indicator" aria-label="5">5</span>
  </span>
</span>

Visibility

Change the badge's visibility using the .ui-invisibleclass.

.ui-invisible

HTML

<span class="ui-anchor ui-badge ui-invisible">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 32 32"
  >
    <path
      fill="currentColor"
      d="M2.004 9.303A4.5 4.5 0 0 1 6.5 5h19a4.5 4.5 0 0 1 4.496 4.303l-1.476.82L16 16.864L3.48 10.123zM2 11.588V22.5A4.5 4.5 0 0 0 6.5 27h19a4.5 4.5 0 0 0 4.5-4.5V11.588l-.526.293l-13 7a1 1 0 0 1-.948 0L2.514 11.874z"
    ></path>
  </svg>
  <span class="ui-anchor-floating">
    <span class="ui-badge-indicator" aria-label="5">5</span>
  </span>
</span>

<span class="ui-anchor ui-badge ui-dot ui-invisible">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 32 32"
  >
    <path
      fill="currentColor"
      d="M2.004 9.303A4.5 4.5 0 0 1 6.5 5h19a4.5 4.5 0 0 1 4.496 4.303l-1.476.82L16 16.864L3.48 10.123zM2 11.588V22.5A4.5 4.5 0 0 0 6.5 27h19a4.5 4.5 0 0 0 4.5-4.5V11.588l-.526.293l-13 7a1 1 0 0 1-.948 0L2.514 11.874z"
    ></path>
  </svg>
  <span class="ui-anchor-floating">
    <span class="ui-badge-indicator"></span>
  </span>
</span>

Alignment

Where the badge should be placed over the child.

.ui-start-start, default, .ui-end-start, .ui-end-end.

35 99+ OK! 3K

HTML

<span
  class="ui-anchor ui-badge ui-start-start"
  style="
    --anchor-position-area: start start;
    --_anchor-inset: auto 100% 100% auto;
  "
>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 32 32"
  >
    <path
      fill="currentColor"
      d="M2.004 9.303A4.5 4.5 0 0 1 6.5 5h19a4.5 4.5 0 0 1 4.496 4.303l-1.476.82L16 16.864L3.48 10.123zM2 11.588V22.5A4.5 4.5 0 0 0 6.5 27h19a4.5 4.5 0 0 0 4.5-4.5V11.588l-.526.293l-13 7a1 1 0 0 1-.948 0L2.514 11.874z"
    ></path>
  </svg>
  <span class="ui-anchor-floating">
    <span class="ui-badge-indicator" aria-label="35">35</span>
  </span>
</span>

<span class="ui-anchor ui-badge">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 32 32"
  >
    <path
      fill="currentColor"
      d="M2.004 9.303A4.5 4.5 0 0 1 6.5 5h19a4.5 4.5 0 0 1 4.496 4.303l-1.476.82L16 16.864L3.48 10.123zM2 11.588V22.5A4.5 4.5 0 0 0 6.5 27h19a4.5 4.5 0 0 0 4.5-4.5V11.588l-.526.293l-13 7a1 1 0 0 1-.948 0L2.514 11.874z"
    ></path>
  </svg>
  <span class="ui-anchor-floating">
    <span class="ui-badge-indicator" aria-label="99+">99+</span>
  </span>
</span>

<span
  class="ui-anchor ui-badge ui-end-start"
  style="
    --anchor-position-area: end start;
    --_anchor-inset: 100% 100% auto auto;
  "
>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 32 32"
  >
    <path
      fill="currentColor"
      d="M2.004 9.303A4.5 4.5 0 0 1 6.5 5h19a4.5 4.5 0 0 1 4.496 4.303l-1.476.82L16 16.864L3.48 10.123zM2 11.588V22.5A4.5 4.5 0 0 0 6.5 27h19a4.5 4.5 0 0 0 4.5-4.5V11.588l-.526.293l-13 7a1 1 0 0 1-.948 0L2.514 11.874z"
    ></path>
  </svg>
  <span class="ui-anchor-floating">
    <span class="ui-badge-indicator" aria-label="OK!">OK!</span>
  </span>
</span>

<span
  class="ui-anchor ui-badge ui-end-end"
  style="--anchor-position-area: end end; --_anchor-inset: 100% auto auto 100%"
>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 32 32"
  >
    <path
      fill="currentColor"
      d="M2.004 9.303A4.5 4.5 0 0 1 6.5 5h19a4.5 4.5 0 0 1 4.496 4.303l-1.476.82L16 16.864L3.48 10.123zM2 11.588V22.5A4.5 4.5 0 0 0 6.5 27h19a4.5 4.5 0 0 0 4.5-4.5V11.588l-.526.293l-13 7a1 1 0 0 1-.948 0L2.514 11.874z"
    ></path>
  </svg>
  <span class="ui-anchor-floating">
    <span class="ui-badge-indicator" aria-label="3K">3K</span>
  </span>
</span>

API

Badge API

Type	Modifiers	Default	Description
Alignment	`.ui-end-end`, `.ui-end-start`, `.ui-start-start`, `--anchor-position-area`	-	Where the indicator is placed.
Colors	`.ui-critical`, `.ui-info`, `.ui-neutral`, `.ui-success`, `.ui-warning`	-	Optional colors.
Variants	`.ui-dot`	-	Renders the indicator as a dot, without a label.
Visibility	`.ui-invisible`	-	Hides the indicator.

Parts

Part	Description
`.ui-badge`	Container element. Also takes `.ui-anchor`.
`& > :first-child`	The element the badge is anchored to.
`.ui-badge-indicator`	The indicator, inside `.ui-anchor-floating`.

With an alignment class, also set --anchor-position-area to the same position, such as start start.

Browser support

See also the full browser support guide.

Installation

Dependencies

Anchor

badge.css

@layer components.extended {
  :where(.ui-badge) {
    --_anchor-tx: -50%;
    --_anchor-ty: 50%;
    --_badge-inset: auto auto 100% 100%;
    --_bg-color: var(--primary);
    --_border-color: var(--primary);
    --_dot-size: var(--size-2);
    --_size: var(--size-4);
    --_text-color: var(--gray-1);

    display: inline-flex;
    position: relative;
    vertical-align: middle;

    /* Floating wrapper: traditional inset-based positioning so this works
       in browsers without position-area support (Firefox, older Safari). */
    & > .ui-anchor-floating:not([popover]) {
      inset: var(--_badge-inset);
      position-anchor: auto;
      position-area: none;
    }

    /* Indicator */
    & > .ui-anchor-floating > .ui-badge-indicator {
      background-color: var(--_bg-color);
      block-size: var(--_size);
      border: 2px solid var(--_border-color);
      border-radius: var(--radius-round);
      color: var(--_text-color);
      display: grid;
      font-size: var(--font-size-0);
      font-weight: 500;
      inline-size: max-content;
      line-height: normal;
      min-inline-size: var(--_size);
      padding-inline: var(--size-1);
      place-items: center;
      text-align: center;
      transition: opacity 0.2s var(--ease-out-1);
    }

    /* Colors */
    &.ui-critical {
      --_bg-color: var(--critical);
      --_border-color: var(--critical);
    }

    &.ui-success {
      --_bg-color: var(--success);
      --_border-color: var(--success);
    }

    &.ui-info {
      --_bg-color: var(--info);
      --_border-color: var(--info);
    }

    &.ui-warning {
      --_bg-color: var(--warning);
      --_border-color: var(--warning);
    }

    &.ui-neutral {
      --_bg-color: var(--neutral);
      --_border-color: var(--neutral);
    }

    /* Alignment */
    &.ui-start-start {
      --_anchor-tx: 50%;
      --_anchor-ty: 50%;
      --_badge-inset: auto 100% 100% auto;
    }

    &.ui-end-start {
      --_anchor-tx: 50%;
      --_anchor-ty: -50%;
      --_badge-inset: 100% 100% auto auto;
    }

    &.ui-end-end {
      --_anchor-tx: -50%;
      --_anchor-ty: -50%;
      --_badge-inset: 100% auto auto 100%;
    }

    /* Dot */
    &.ui-dot {
      --_anchor-tx: calc((var(--_dot-size) - 2px) * -1);
      --_anchor-ty: var(--_dot-size);
    }

    &.ui-dot > .ui-anchor-floating > .ui-badge-indicator {
      block-size: var(--_dot-size);
      inline-size: var(--_dot-size);
      min-inline-size: var(--_dot-size);
      padding: 0;
    }

    /* Visibility */
    &.ui-invisible > .ui-anchor-floating > .ui-badge-indicator {
      opacity: 0;
      pointer-events: none;
    }
  }
}

anchor.css

@layer components.root {
  :where(.ui-anchor) {
    anchor-name: --anchor;
    anchor-scope: --anchor;
    display: inline-block;
    inline-size: fit-content;

    /* Always-visible */
    & > .ui-anchor-floating:not([popover]) {
      block-size: max-content;
      inline-size: max-content;
      position: absolute;
      position-anchor: --anchor;
      position-area: var(--anchor-position-area, start end);
      translate: var(--_anchor-tx, 0) var(--_anchor-ty, 0);
    }

    /* Hover-triggered */
    & > .ui-anchor-floating[popover] {
      inset: unset;
      margin: 0;
      position: absolute;
      position-area: var(--anchor-position-area, start end);
      translate: var(--_anchor-tx, 0) var(--_anchor-ty, 0);
    }
  }
}

Badge

Anatomy

Variants

Indicator

Severities

Visibility

Alignment

API

Badge API

Parts

Browser support

Installation

Dependencies