mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 21:48:19 +08:00
2.2 KiB
2.2 KiB
category | group | title | description | cover | coverDark | demo | ||
---|---|---|---|---|---|---|---|---|
Components | Data Display | Tag | Used for marking and categorization. | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*_SBsSrKLg00AAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JPNAQYrVkYkAAAAAAAAAAAAADrJ8AQ/original |
|
When To Use
-
It can be used to tag by dimension or property.
-
When categorizing.
Examples
Basic
Colorful Tag
Inverse Colorful Tag
Add & Remove Dynamically
Checkable
Animate
Icon
Status Tag
borderless
borderless in layout
Customize close
Draggable Tag
Component Token
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 | - |