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.
The tag has two available tones, outline and filled (default). Use the filled tone for filters, multiselects and attachments, and use the outline tone alongside a component to highlight an attribute.
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.
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.
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.
By default, the tag has a max width of 12.5rem (usually 200px). This is customisable via the maxWidth prop.