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.
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.
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.
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.
Use the disabled prop when certain tags represent locked or fixed attributes that shouldn't be altered.
By default, the tag has a max width of 12.5rem (usually 200px). This is customisable via the maxWidth prop.