A tag represents a label, category, keyword, or filter, and can be used for various groupings. If you need multiple tags, consider using the TagGroup component.
Tags can be used to categorize items. Use short labels for easy scanning. Use two words only if necessary to describe the status and differentiate it from other tags.
<Tag> <Avatar /> /* (Optional) An avatar in the Tag */ <Icon /> /* (Optional) An icon in the Tag */ <IconList /> /* (Optional) A list of icons in the Tag */ <Text /> /* (Optional) Text is optional, but becomes required if any other elements are present */ <Badge /> /* (Optional) A badge in the Tag */ </Tag>
A Tag uses the following components:
If you need multiple tags to describe an element, consider using the TagGroup component.
A tag can vary in size.
A tag can be disabled using the isDisabled prop.
A tag can vary in style using the variant prop.
A tag can be set as invalid using the isInvalid prop.
A tag can have a loading state using the isLoading prop.
A tag can contain an avatar.
A tag can contain an icon or an icon list.
A tag can contain a count using the Badge component.
A tag can be a link by using the href prop on the Tag component. Tags with an href are not selectable.
A tag can be rendered as a react router link when using the href prop and setting the navigate prop on the HopperProvider.
Tags should:
Whether the tag is invalid or not.
Whether the tag is loading or not.
The size of the tag.
The visual style of the Tag.
The props of the ClearButton.
The props of the Spinner.
The inline style for the element. A function may be provided to compute the style based on component state.
A unique id for the tag.
A string representation of the tags's contents, used for accessibility. Required if children is not a plain text string.
Whether the tag is disabled.
The children of the component. A function may be provided to alter the children based on component state.
The CSS className for the element. A function may be provided to compute the class based on component state.
A URL to link to. See MDN.
Hints at the human language of the linked URL. SeeMDN.
The target window for the link. See MDN.
The relationship between the linked resource and the current page. See MDN.
Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.
A space-separated list of URLs to ping when the link is followed. See MDN.
How much of the referrer to send when following the link. See MDN.
Options for the configured client side router.
Not recommended – use onPress instead. onClick is an alias for onPress
provided for compatibility with other libraries. onPress provides
additional event details for non-mouse interactions.
Handler that is called when a hover interaction starts.
Handler that is called when a hover interaction ends.
Handler that is called when the hover state changes.
Handler that is called when the press is released over the target.
Handler that is called when a press interaction starts.
Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.
Handler that is called when the press state changes.
Handler that is called when a press is released over the target, regardless of whether it started on the target or not.
Coming from Orbiter, you should be aware of the following changes:
fluid is not supported.variant values are now neutral | subdued | progress | positive | caution | negative | option1 | option2 | option3 | option4 | option5 | option6 and not solid | outline.validationState is not supported. Use isInvalid instead.