- 1.5.0

Badge

Renders a badge, typically used for drawing attention to elements like notification counts.

Read more Read less

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);
}
Default
Open in playground
8 
<.badge>
  8
</.badge>
Large count
Open in playground
+1000 
<.badge>
  +1000
</.badge>
On a button
Open in playground

In this example, the badge is placed on a button and visually hidden text adds context for screen reader users. The button's accessible name is "Messages 3 unread".

<.button type="button">
  <svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
  class="lucide lucide-mails"
  aria-hidden="true"
>
  <rect width="16" height="13" x="6" y="4" rx="2" /><path d="m22 7-7.1 3.78c-.57.3-1.23.3-1.8 0L6 7" /><path d="M2 8v11c0 1.1.9 2 2 2h14" />
</svg>

  <span data-visually-hidden>Messages</span>
  <.badge variant="danger">
    3<span data-visually-hidden> unread</span>
  </.badge>
</.button>
Size
Open in playground
8 8 8 8 
<.badge size="small">
  8
</.badge>
<.badge size="normal">
  8
</.badge>
<.badge size="medium">
  8
</.badge>
<.badge size="large">
  8
</.badge>
Variant
Open in playground
8 8 8 8 8 8 8 
<.badge variant={nil}>
  8
</.badge>
<.badge variant="primary">
  8
</.badge>
<.badge variant="secondary">
  8
</.badge>
<.badge variant="info">
  8
</.badge>
<.badge variant="success">
  8
</.badge>
<.badge variant="warning">
  8
</.badge>
<.badge variant="danger">
  8
</.badge>