Badge

wu-badge is a small pill for a count or a status. Numbers use tabular figures, so counts keep their width.

Class	Effect
`wu-badge`	Root. Gray subtle background, border and text
`brand`, `success`, `danger`, `warning`, `info`	Role colors: subtle background, role border and role text
`corner`	Pins the badge to the top inline-end corner of a `wu-badge-host`; mirrors under `dir="rtl"`. Empty, it is hidden
`wu-badge-host`	Part. Wrapper that the corner badge is positioned against
`--wu-badge--Offset`	How far a corner badge sits outside the host, `50%` by default
`solid`	Solid fill. Gray by default, the role fill with a role word

Default

Draft

<span class="wu-badge">Draft</span>

Roles

New Active Failed Pending Beta

<div class="flex wrap x-center gap-2">
  <span class="wu-badge brand">New</span>
  <span class="wu-badge success">Active</span>
  <span class="wu-badge danger">Failed</span>
  <span class="wu-badge warning">Pending</span>
  <span class="wu-badge info">Beta</span>
</div>

Solid

For stronger emphasis. Text on a role fill uses the text-on-{role} token.

Draft New Active Failed Pending Beta

<div class="flex wrap x-center gap-2">
  <span class="wu-badge solid">Draft</span>
  <span class="wu-badge solid brand">New</span>
  <span class="wu-badge solid success">Active</span>
  <span class="wu-badge solid danger">Failed</span>
  <span class="wu-badge solid warning">Pending</span>
  <span class="wu-badge solid info">Beta</span>
</div>

Counts

Inbox 12 Errors 108

<div class="flex wrap x-center gap-3">
  <span>Inbox <span class="wu-badge brand">12</span></span>
  <span>Errors <span class="wu-badge solid danger">108</span></span>
</div>

Corner

Wrap the element in wu-badge-host and add corner to the badge. The badge sits on the top inline-end corner, so it moves to the left under dir="rtl". A ring in the surface color separates it from the host; set --wu-avatar--RingColor on another background. Put the count in the label of the host, not only in the badge.

<div class="flex wrap x-center gap-6">
  <span class="wu-badge-host">
    <button class="wu-btn" type="button" aria-label="Inbox, 12 unread">Inbox</button>
    <span class="wu-badge corner solid danger" aria-hidden="true">12</span>
  </span>
  <span class="wu-badge-host">
    <span class="wu-avatar blue" role="img" aria-label="Ana Lopez, 3 new">AL</span>
    <span class="wu-badge corner solid brand" aria-hidden="true">3</span>
  </span>
  <span class="wu-badge-host" dir="rtl">
    <button class="wu-btn" type="button" aria-label="البريد، 5 جديدة">البريد</button>
    <span class="wu-badge corner solid danger" aria-hidden="true">5</span>
  </span>
</div>

Badge, tag or dot

Use a badge for a count or a status that reads as a word. Use a tag for a category or filter, often a link or with a remove button. Use a dot beside existing text, when the status needs only a small marker.

Load only the badge

@use "@wovenui/components/badge";

The badge needs no other component.