Components

Tag

Labels a category, an applied filter or a recipient; it can be removable or selectable.

Storybook: Storybook
Source: Source

When to use

Tag classifies an item with a short word or shows a selection. Use it for category labels, applied filters and recipient lists. Add onRemove when users can remove the tag, and selected when it switches a filter on and off.

When not to use

To report a status: use StatusBadge or Badge for states such as draft, active or failed; a Tag shows a value the user assigned or picked.
To show a number: use Badge for small counters such as an unread count.
To start an action: a Tag does not act. Use Button for actions.
For long text: a label should be one or two words; longer text is cut off on one line.

Anatomy

Root: 1 px border, transparent background and 6 px (radius-sm) corners.
Selection mark (selectable only): a check mark that appears on selection.
Icon (Tag.Icon): optional, decorative, 12 or 16 px.
Label (Tag.Label): 14 px semibold text; truncated when wider than its container.
Remove (Tag.Remove): only on a removable tag, a button with a 24 px target.
Group (Tag.Group): gathers the tags as a named list (role="list").

Behaviour

A static tag does not change on hover or click and is not a tab stop.
On a removable tag only the remove button takes focus; Enter, Space, click, Backspace and Delete remove the tag.
The whole selectable tag is one button; Enter and Space change its state.
A tag cannot be both selectable and removable; the prop types prevent it.
In a Tag.Group, when a tag is removed focus moves to the next tag’s button, else the previous one, else the onEmpty target. There is no arrow-key navigation; each remove button is its own tab stop.
A tag added to a group rises 4 px as it appears. Removal is immediate; there is no exit animation.
A selectable tag reserves room for the check mark, so its width does not change when selected.

Guidelines

Keep the label short

Write one or two words. Sentences and descriptions are not labels.

Design

DoShort, one concept.

This label is a far too long description

Don'tA sentence: it is cut off and unreadable.

Group removable tags

Put removable tags in a Tag.Group: the list is named and focus management works.

Design

Development

DoThe group is named and manages focus.

DesignDevelopment

Don'tLoose tags: not read as a list.

Let the text carry the meaning

The tone only emphasises. Colour alone should not carry a meaning.

Research

DoThe text says what it means; the tone supports it.

Don'tA tag without a label: only the tone carries a meaning.

Use tones sparingly

Keep most tags in one row neutral; a tone should mark a real difference.

DesignDevelopmentResearch

DoNeutral tags, one emphasis.