Maturity: Developing

Usage

<.badge>8</.badge>

On a control

A count on its own has no meaning. Add visually hidden text that to give it context. In the example below, the button's accessible name becomes "Messages 3 unread".

<.button>
  <Heroicon.envelope />
  <span data-visually-hidden>Messages</span>
  <.badge>3<span data-visually-hidden> unread</span></.badge>
</.button>

You can place the badge into the corner of the control with CSS.

:is(a, button, summary, [role="tab"], [role="menuitem"]):has(> .badge) {
  position: relative;
}

:is(a, button, summary, [role="tab"], [role="menuitem"]) > .badge {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  margin-block-start: var(--badge-overlap);
  margin-inline-end: var(--badge-overlap);
}