Tag
Tags show attributes of related components.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 tagSecond tagThird tag
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.
InformativeInformativeNeutralNeutral
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.
FilledFilledOutlinedOutlined
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 tagMedium tag
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
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 smallIcon medium
Use the disabled prop when certain tags represent locked or fixed attributes that shouldn't be altered.
LabelRemovableIcon
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