Tag

A compact label. Use it for status pills, filter chips, or inline tags. The optional Remove sub-component is a native <button> with full interactive state tracking.

Features

Three composable parts: Root, Label, Remove.

Remove tracks hover, focus, active, and disabled via data attributes.

Disabled state on Root applies data-disabled for styling.

Remove defaults to a sensible aria-label for screen readers.

Example

activedraftarchived

ReactVueSolid

Anatomy


import { Tag } from '@wire-ui/react'
 
<Tag.Root>
<Tag.Label>React</Tag.Label>
<Tag.Remove onClick={() => remove('react')}>×</Tag.Remove>
</Tag.Root>

Styling

Tag.Root exposes data-disabled when disabled is true. Tag.Remove tracks the full set of interactive states (data-hover, data-focus-visible, data-active) via data attributes.


<Tag.Root disabled className="
  data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed
">
  <Tag.Label>archived</Tag.Label>
</Tag.Root>
 
<Tag.Remove className="
  [data-hover]:bg-[#e5e5e5]
  [data-focus-visible]:ring-2 [data-focus-visible]:ring-black
  [data-active]:scale-95
">
  ×
</Tag.Remove>

Using data attributes

Tag.Root sets data-disabled when disabled. Tag.Remove exposes the same interactive-state attributes as Button.


[data-disabled]       { opacity: 0.5; cursor: not-allowed; }
[data-hover]          { background: #e5e5e5; }
[data-focus-visible]  { outline: 2px solid black; }
[data-active]         { transform: scale(0.95); }

Root props

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Disabled state — adds `data-disabled`
`...rest`	`HTMLAttributes<HTMLSpanElement>`	—	All standard HTML span attributes

Label props

Prop	Type	Description
`...rest`	`HTMLAttributes<HTMLSpanElement>`	All standard HTML span attributes

Remove props

Prop	Type	Default	Description
`aria-label`	`string`	`'Remove'`	Accessible label for the remove button
`...rest`	`ButtonHTMLAttributes<HTMLButtonElement>`	—	All standard HTML button attributes

Data attributes

Attribute	Element	When present
`data-disabled`	Root	`disabled` prop is true
`data-hover`	Remove	Mouse is over the remove button
`data-focus-visible`	Remove	Remove has keyboard focus
`data-active`	Remove	Remove is being pressed

Accessibility

Remove renders as a <button type="button"> with a sensible default aria-label="Remove" — always pass a more specific label when possible (e.g. aria-label="Remove React").
Root is a <span> with no inherent semantics — wrap with a list or container if your tags belong to a logical group.

Keyboard Interactions

Key	Description
`Tab`	Moves focus to the Remove button.
`Space`	Activates the Remove button.
`Enter`	Activates the Remove button.

Tag