Tags
Tags let users categorize content using a keyword.
Used for this
- To add metadata to an element such as category, attribute, or property
- To communicate status
- To represent parameters of a filter
Not for this
- 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
- Name8.42.0•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
Tag
| Prop name | Type | Default | Description |
|---|---|---|---|
hue | string | – | Sets the color of the tag. Refer to PALETTE for available colors. 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<any>
Tag.Close
Extends HTMLAttributes<HTMLDivElement>