Tag

Used for marking and selection.

Basic usage

Removable Tag

Edit Dynamically

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

Sizes

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

Theme

Tag provide three different themes: darklight and plain

Checkable tag

Sometimes because of the business needs, we might need checkbox like tag, but button like checkbox cannot meet our needs, here comes check-tag

Attributes

AttributeDescriptionTypeAccepted ValuesDefault
typecomponent typestringsuccess/info/warning/danger
closablewhether Tag can be removedbooleanfalse
disable-transitionswhether to disable animationsbooleanfalse
hitwhether Tag has a highlighted borderbooleanfalse
colorbackground color of the Tagstring
sizetag sizestringmedium / small / mini
effectcomponent themestringdark / light / plainlight

Events

Event NameDescriptionParameters
clicktriggers when Tag is clicked
closetriggers when Tag is removed

Slots

NameDescription
customize default content

CheckTag Attributes

AttributeDescriptionTypeAccepted ValuesDefault
checkedis checkedbooleantrue/false

CheckTag Events

Event NameDescriptionParameters
changetriggers when Check Tag is clickedchecked

CheckTag Slots

NameDescription
customize default content