Tag
Tag
Used for marking and categorization.
Importimport{ Tag }from"antd"; |
Sourcecomponents/tag |
When To Use
It can be used to tag by dimension or property.
When categorizing.
Examples
UnremovableTag 2Tag 3New Tag
Tag 1Tag 2Tag 3
New TagWithout icon
successprocessingerrorwarningdefault
With icon
successprocessingerrorwarningwaitingstop
Tag 1Tag 2Tag 3
Presets
magentaredvolcanoorangegoldlimegreencyanbluegeekbluepurple
Custom
#f50#2db7f5#87d068#108ee9
Categories:MoviesBooksMusicSports
TwitterYoutubeFacebookLinkedIn
Tag 1Tag 2Tag 3Tag 4
processingsuccesserrorwarningmagentaredvolcanoorangegoldlimegreencyanbluegeekbluepurple
API
Common props ref:Common props
Tag
Property | Description | Type | Default | Version |
---|---|---|---|---|
closeIcon | Custom close icon. 5.7.0: close button will be hidden when setting to null or false | ReactNode | false | 4.4.0 |
color | Color of the Tag | string | - | |
icon | Set the icon of tag | ReactNode | - | |
bordered | Whether has border style | boolean | true | 5.4.0 |
onClose | Callback executed when tag is closed | (e: React.MouseEvent<HTMLElement, MouseEvent>) => void | - | |
disabled | Whether the tag is disabled | boolean | false | 6.0.0 |
href | The address to jump when clicking, when this property is specified, the tag component will be rendered as an <a> tag | string | - | 6.0.0 |
target | The target attribute of the a tag, which takes effect when href is specified | string | - | 6.0.0 |
Tag.CheckableTag
Property | Description | Type | Default |
---|---|---|---|
checked | Checked status of Tag | boolean | false |
onChange | Callback executed when Tag is checked/unchecked | (checked) => void | - |
Design Token
Component TokenHow to use?
Token Name | Description | Type | Default Value |
---|---|---|---|
defaultBg | Default background color | string | #fafafa |
defaultColor | Default text color | string | rgba(0,0,0,0.88) |