Search
Tag

Tag for categorizing or markup

Tag

When to use

It can be used to tag by dimension or property.
When categorizing.


Basic

Usage of basic Tag, and it could be closable by set closable property. Closable Tag supports onClose events.
Tag 1LinkTag 2Prevent Default

Colorful Tag

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.
Example tagExample tagExample tagExample tagExample tagExample tag

Add & Remove Dynamically

Generating a set of Tags by array, you can add and remove dynamically.
UnremovableTag 2Tag 3
New

Checkable

CheckableTag works like Checkbox, click it to toggle checked state.
it is an absolute controlled component and has no uncontrolled mode.
Categories:MoviesBooksMusicSports

Controlled

By using the visible prop, you can control the close state of Tag.
Tag 2

Animate

Animating the Tag by using .
Tag 1Tag 2Tag 3
New

Status Tag

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

API

Tag
PropertyDescriptionTypeDefault
closable
Whether the Tag can be closed
boolean
false
color
Color of the Tag
string
-
closeIcon
custom close icon
ReactNode
-
onClose
Callback executed when tag is closed
(e) => void
-
visible
Whether the Tag is closed or not
boolean
true
icon
Set the icon of tag
ReactNode
-
Tag.CheckableTag
PropertyDescriptionTypeDefault
checked
Checked status of Tag
boolean
false
onChange
Callback executed when Tag is checked/unchecked
(checked) => void
-