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

Rounded > 2.1.7

Tag can also be rounded like button.

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

NameDescriptionTypeAccepted 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 sizestringlarge / default /smalldefault
effectcomponent themestringdark / light / plainlight
roundwhether Tag is roundedbooleanfalse

Events

NameDescriptionParameters
clicktriggers when Tag is clicked
closetriggers when Tag is removed

Slots

NameDescription
customize default content

CheckTag Attributes

NameDescriptionTypeAccepted ValuesDefault
checkedis checkedbooleantrue/false

CheckTag Events

NameDescriptionParameters
changetriggers when Check Tag is clickedchecked

CheckTag Slots

NameDescription
customize default content

Source

ComponentDocs

Contributors