Tag

The <Tag /> component forms a relationship to another component, displaying chosen attributes and optionally provides a quick removal step in the form of an X button. A common usage is to present multi-selected options in a search input.

NOTE: For communicating statuses or numeric tallies, use the Badge instead of a tag.

First tag
Second tag
Third tag
Show codeCopy code

A tag has two available tones: neutral and informative (default). The informative tone is used when more emphasis is required. If a tag requires less attention from the user, the neutral tone should be used.

Informative
Informative
Neutral
Neutral
Show codeCopy code

A tag has two available weights: outline and filled (default). Use the filled weight for filters, multiselects and attachments, and use the outline weight alongside a component to highlight an attribute.

Filled
Filled
Outlined
Outlined
Show codeCopy code

The tag supports two sizes, small and medium (default). small is suitable for tables or in small multiselect and medium in medium multiselect, to display attachments or in quick filters.

Small tag
Medium tag
Show codeCopy code

When you need a tag to be removable you can use the optional onClickRemove prop to pass a function that controls the visibility state of the tag or group of tags. This will render an X button inside the tag.

Removable tag
Show codeCopy code

An icon can be added to help clarify the label and is rendered on the left. The icon is dynamically sized based on the tag's size prop.

Icon small
Icon medium
Show codeCopy code

Use the disabled prop when certain tags represent locked or fixed attributes that shouldn't be altered.

Label
Removable
Icon
Show codeCopy code

By default, the tag has a max width of 12.5rem (usually 200px). This is customisable via the maxWidth prop.

Long labels will be truncated with an ellipsis
Show codeCopy code