---
category: Components
group: Data Display
title: Tag
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*_SBsSrKLg00AAAAAAAAAAAAADrJ8AQ/original
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JPNAQYrVkYkAAAAAAAAAAAAADrJ8AQ/original
demo:
cols: 2
---
Tag for categorizing or markup.
## 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](/docs/react/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) => 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