Components

Badge

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

<Badge>
Container element. Also takes .ui-anchor.
slot="default"
The element the badge is anchored to.
slot="indicator"
The indicator, inside .ui-anchor-floating.

Variants

Default, and dot.

Astro

---
import { Badge } from "@opui/astro"
---

<Badge label="5">
  <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
  >
</Badge>

<Badge 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
  >
</Badge>

Output

<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

Set indicator text with the label prop or the indicator slot. The default slot holds the anchored element.

599+

Astro

---
import { Badge } from "@opui/astro"
---

<Badge label="5">
  <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
  >
</Badge>

<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
  >
  <Fragment slot="indicator">99+</Fragment>
</Badge>

Output

<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

critical, info, neutral, success, warning.

55555

Astro

---
import { Badge } from "@opui/astro"
---

<Badge color="critical" label="5">
  <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
  >
</Badge>
<Badge color="info" label="5">
  <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
  >
</Badge>
<Badge color="success" label="5">
  <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
  >
</Badge>
<Badge color="warning" label="5">
  <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
  >
</Badge>
<Badge color="neutral" label="5">
  <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
  >
</Badge>

Output

<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 invisibleprop.

invisible

Astro

---
import { Badge } from "@opui/astro"
---

<Badge label="5" invisible>
  <!-- -->
</Badge>

<Badge dot invisible>
  <!-- -->
</Badge>

Output

<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.

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

3599+OK!3K

Astro

---
import { Badge } from "@opui/astro"
---

<Badge alignment="start-start" label="35">
  <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
  >
</Badge>
<Badge label="99+">
  <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
  >
</Badge>
<Badge alignment="end-start" label="OK!">
  <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
  >
</Badge>
<Badge alignment="end-end" label="3K">
  <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
  >
</Badge>

Output

<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

Prop	Type	Default	Description
`alignment`	`"start-start"`, `"end-start"`, `"end-end"`	-	Where the indicator is placed.
`color`	`"critical"`, `"info"`, `"neutral"`, `"success"`, `"warning"`	-	Optional colors.
`dot`	`boolean`	`false`	Renders the indicator as a dot, without a label.
`invisible`	`boolean`	`false`	Hides the indicator.
`label`	`string`, `number`	-	The indicator, inside `.ui-anchor-floating`.

Slots

Slot	Description
`default`	The element the badge is anchored to.
`indicator`	The indicator, inside `.ui-anchor-floating`.

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

Slots

Browser support

Installation

Dependencies