Skip to content


Tags are used to inform the user of the status of specific data.

Basic usage

Use the type attribute to define Tag's type. In addition, the bgColor attribute can be used to set the background color of the Tag.

Removable Tag

closable attribute can be used to define a removable tag. It accepts a Boolean. By default the removal of Tag has a fading animation. If you don't want to use it, you can set the disable-transitions attribute, which accepts a Boolean, to true. close event triggers when Tag is removed.

Edit Dynamically

You can use the close event to add and remove tag dynamically.



Besides default size, Tag component provides three additional sizes for you to choose among different scenarios.

Use attribute size to set additional sizes with xs, sm,md,lg.


Tag provide three different themes: darklight

Using light to change, default is dark


Tag can also be rounded like button.

Checkable tag


Tag Props

size'xs' | 'sm' | 'md' | 'lg''sm'Tag size.
lightbooleanfalseDetermine whether it's a light tag.
type'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info''primary'Tag type.
closablebooleanfalseWhether Tag can be removed.
bgColorstringundefinedBackground color of the tag.
roundedbooleanfalseWhether tag is rounded.

Tag Slots

default()Customize default content.

Tag Methods

click() => voidTriggers when Tag is clicked.
close() => voidTriggers when Tag is removed.

MIT Licensed