Tag

wu-tag labels an item with a category or a filter. A tag can be plain text, a link or a button, and can carry a remove button.

Class	Effect
`wu-tag`	Root. Surface background, regular border, small radius
`gray`, `red`, `blue`, `green`, `yellow`, `purple`, `pink`	Hue colors: subtle background, hue border and hue text
`aria-pressed`	On a `<button>` tag: a checkable filter chip, with a check mark when `true` (see Filter chip)
`wu-tag-remove`	Part. A remove button inside the tag, its cross drawn in CSS

Default

Design

<span class="wu-tag">Design</span>

Hues

Archived Bug Frontend Released In review Research Design

<div class="flex wrap x-center gap-2">
  <span class="wu-tag gray">Archived</span>
  <span class="wu-tag red">Bug</span>
  <span class="wu-tag blue">Frontend</span>
  <span class="wu-tag green">Released</span>
  <span class="wu-tag yellow">In review</span>
  <span class="wu-tag purple">Research</span>
  <span class="wu-tag pink">Design</span>
</div>

Link and button tags

On an <a href> or a <button>, the tag gets a pointer, a hover color and the focus ring.

<div class="flex wrap x-center gap-2">
  <button class="wu-tag" type="button">Filter by design</button>
  <button class="wu-tag blue" type="button">Frontend</button>
</div>

Filter chip

aria-pressed on a button tag makes a checkable chip. When it is true the tag gets a brand tint, a ring and a check mark, so color is not the only signal. Toggling the attribute on click is up to your script.

<div class="flex wrap x-center gap-2" role="group" aria-label="Filter by topic">
  <button class="wu-tag" type="button" aria-pressed="true">Design</button>
  <button class="wu-tag" type="button" aria-pressed="false">Research</button>
  <button class="wu-tag blue" type="button" aria-pressed="true">Frontend</button>
  <button class="wu-tag blue" type="button" aria-pressed="false">Backend</button>
</div>

Icon

A direct child svg is sized to 1em and takes the text color.

New Filled

<div class="flex wrap x-center gap-2">
  <span class="wu-tag green"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>New</span>
  <span class="wu-tag blue"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M7.25 2h1.5v5.25H14v1.5H8.75V14h-1.5V8.75H2v-1.5h5.25z"/></svg>Filled</span>
</div>

Remove button

The cross is drawn with two CSS bars, so the button needs an aria-label that names the tag.

Design Research

<div class="flex wrap x-center gap-2">
  <span class="wu-tag">Design <button class="wu-tag-remove" type="button" aria-label="Remove Design"></button></span>
  <span class="wu-tag purple">Research <button class="wu-tag-remove" type="button" aria-label="Remove Research"></button></span>
</div>

Right to left

Tags and the remove button follow the document direction.

تصميم

<div dir="rtl" class="flex wrap x-center gap-2">
  <span class="wu-tag">تصميم <button class="wu-tag-remove" type="button" aria-label="إزالة تصميم"></button></span>
  <button class="wu-tag blue" type="button" aria-pressed="true">واجهة</button>
  <button class="wu-tag" type="button" aria-pressed="false">بحث</button>
</div>

Load only the tag

@use "@wovenui/components/tag";

The tag needs no other component.