Tags
Tags let users categorize content using a keyword.
- To add metadata to an element such as category, attribute, or property
- To communicate status
- To represent parameters of a filter
- To prompt an action by the user, use a Button instead
How to use it
Default
The default usage of a Tag component.
Avatar
Medium and large Tags can contain an Avatar.
Close
Tags can be dismissed.
Color
Tags can be colored using a theme palette hue or hex value.
Shape
Tags are rectangular by default. Other options are pill and round. Round tags are reserved for very short content like two digit numbers.
Size
Tags can be small, medium, or large. They are medium by default.
Regular weight
Tag content is bold by default, but can be regular weight too.
Configuration
- Name9.0.0-next.26•View source•View on npm
- Installnpm install @zendeskgarden/react-tags
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Tag } from '@zendeskgarden/react-tags'
API
The Tag component follows this structure:
<Tag><Tag.Avatar /> {/* optional */}{/* tag text */}<Tag.Close /> {/* optional */}</Tag>
Tag
Extends HTMLAttributes<HTMLDivElement>
The Tag component applies appropriate styles to itself and its descendents based on the props and child elements provided.
| Prop name | Type | Default | Description |
|---|---|---|---|
hue | string | Sets the color of the tag. Refer to theming colors or PALETTE for available colors. Use primary hues – blue, green, grey, kale, red, yellow or primaryHue, successHue, neutralHue, chromeHue, dangerHue, warningHue – to apply color based on light/dark mode. Accepts any hex value. | |
isPill | boolean | Applies pill styling | |
isRegular | boolean | Applies regular (non-bold) font weight | |
isRound | boolean | Applies styles to round the tag | |
size | 'small' | 'medium' | 'large' | 'medium' | Adjusts font size and padding |
Tag.Avatar
Extends HTMLAttributes<HTMLElement>
The Avatar component displays the child media with appropriate styles applied. Nest it within the Tag component as the first child.
Tag.Close
Extends HTMLAttributes<HTMLButtonElement>
The Close component displays an icon with appropriate styles and accessibility attributes to allow tag dismissal. Nest it within the Tag component as the last child.