Tag

A tag labels UI objects for quick recognition and navigation.

Install

One package and one stylesheet. The stylesheet carries the tokens every component reads.

pnpm add @wolf-rayet/react

import '@wolf-rayet/react/css/wolf-rayet.css';
import { Tag, TagGroup } from '@wolf-rayet/react';

A required prop is marked with an asterisk.

Prop	Type	Default	Description
text *	string	—	The label. One or two words naming the thing, not describing it.
color	'standard' \| 'blue' \| 'green' \| 'red' \| 'orange' \| 'purple' \| 'teal' \| 'magenta' \| 'lime' \| 'yellow'	'standard'	Picks the ground. Standard is the default and carries no meaning. The rest are for grouping by kind, not for status.
href	string	—	Turns the tag into a link. Use it when the tag names something with a page of its own.
removeButtonLabel	string	—	Adds the remove button and names it for a screen reader. Say what is being removed, as in Remove design.
onRemove	() => void	—	Called when the remove button is pressed. Removing from the list is yours to do.
isRounded	boolean	—	Draws the tag with a full radius. Use it consistently across a set rather than per tag.

A required prop is marked with an asterisk.

Prop	Type	Default	Description
children *	ReactNode	—	The tags. A group handles their spacing and wrapping.

What the component does for you, and what it needs from you.

A removable tag carries a real button, so it is reachable and operable from the keyboard.
Give every remove button a label that names its tag. Without it a screen reader hears Remove repeated across the group with no way to tell them apart.
A linked tag is a real link, so it opens with Enter and offers the usual menu.
Colour carries no meaning here, so it never has to be read.