Tag

Used for marking and categorization.
Importimport{ Tag }from"antd";

When To Use

  • It can be used to tag by dimension or property.

  • When categorizing.

Examples

Tag 1LinkPrevent DefaultTag 2

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.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
UnremovableTag 2Tag 3New Tag

Generating a set of Tags by array, you can add and remove dynamically.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Tag 1Tag 2Tag 3
New Tag

Animating the Tag by using rc-tween-one.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
successprocessingerrorwarningdefault
successprocessingerrorwarningwaitingstop

We preset five different colors, you can set color property such as success,processing,error,default and warning to indicate specific status.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Tag 1Tag 2Tag 3

Draggable tags using dnd kit.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
magentaredvolcanoorangegoldlimegreencyanbluegeekbluepurple
#f50#2db7f5#87d068#108ee9

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.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Categories:MoviesBooksMusicSports

CheckableTag works like Checkbox, click it to toggle checked state.

it is an absolute controlled component and has no uncontrolled mode.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
TwitterYoutubeFacebookLinkedIn

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.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Tag 1Tag 2Tag 3Tag 4
processingsuccesserrorwarningmagentaredvolcanoorangegoldlimegreencyanbluegeekbluepurple

borderless.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

API

Common props ref:Common props

Tag

PropertyDescriptionTypeDefaultVersion
closeIconCustom close icon. 5.7.0: close button will be hidden when setting to null or falseReactNodefalse4.4.0
colorColor of the Tagstring-
iconSet the icon of tagReactNode-
borderedWhether has border stylebooleantrue5.4.0
onCloseCallback executed when tag is closed(e: React.MouseEvent<HTMLElement, MouseEvent>) => void-

Tag.CheckableTag

PropertyDescriptionTypeDefault
checkedChecked status of Tagbooleanfalse
onChangeCallback executed when Tag is checked/unchecked(checked) => void-

Design Token

Component TokenHow to use?

Token NameDescriptionTypeDefault Value
defaultBgDefault background colorstring#fafafa
defaultColorDefault text colorstringrgba(0,0,0,0.88)

Global TokenHow to use?