How to build an accessible Tag in React

When dismissible, the remove control is a real button with a label (dismissLabel) so keyboard users can remove it via Enter/Space; color variants are reinforced by text, not hue alone

When to use a Tag

• Labeling, categorizing, or filtering content with a compact chip
• Representing a removable selection or active filter (onDismiss)
• Showing a set of keywords or attributes on an item

When not to use it

• A static, non-interactive status label — use Badge
• A live system state with a dot — use Status

Keyboard interactions

Role none, verified at WCAG 2.2-AA.

• Enter
• Space

Common mistakes

Avoid: Using Badge with a custom close button to make it removable

Prefer: <Tag onDismiss={remove}> which renders a proper labeled remove button

Tag provides accessible dismiss semantics; bolting interactivity onto Badge skips that

Example

<Tag>Design</Tag>

See the full Tag reference →