Tag
Tag
Used for marking and categorization.
Importimport{ Tag }from"antd"; |
Sourcecomponents/tag |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
It can be used to tag by dimension or property.
When categorizing.
Common props ref：Common props
| 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 |
| Property | Description | Type | Default |
|---|---|---|---|
| checked | Checked status of Tag | boolean | false |
| onChange | Callback executed when Tag is checked/unchecked | (checked) => void | - |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| defaultBg | Default background color | string | #fafafa |
| defaultColor | Default text color | string | rgba(0,0,0,0.88) |
Usage of basic Tag, and it could be closable and customize close button by set closeIcon property, will display default close button when closeIcon is setting to true. Closable Tag supports onClose events.
Generating a set of Tags by array, you can add and remove dynamically.
Animating the Tag by using rc-tween-one.
We preset five different colors, you can set color property such as success,processing,error,default and warning to indicate specific status.
Draggable tags using dnd kit.
We preset a series of colorful tag styles for use in different situations. You can also set it to a hex color string for custom color.
CheckableTag works like Checkbox, click it to toggle checked state.
it is an absolute controlled component and has no uncontrolled mode.
Tag components can contain an Icon. This is done by setting the icon property or placing an Icon component within the Tag.
If you want specific control over the positioning and placement of the Icon, then that should be done by placing the Icon component within the Tag rather than using the icon property.
borderless.
