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
Without 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 | - |
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) |