Tag Component

Tags are used for marking, categorizing, and selecting, making it easy for users to quickly identify different types of information.

Basic Usage

Tags have multiple types: default, primary, success, info, warning, and danger.

Show Code

Tags provide three sizes: small, default, and large.

Show Code

Setting the closable attribute allows the tag to display a close button. Clicking the close button will trigger the close event.

Show Code

Setting the round attribute makes the tag have rounded corners.

Show Code

Setting the disabled attribute disables tag interaction functionality.

Show Code

Attribute	Description	Type	Accepted Values	Default
type	Tag type	string	default / primary / success / info / warning / danger	default
size	Tag size	string	small / default / large	default
closable	Whether closable	boolean	-	false
round	Whether rounded	boolean	-	false
disabled	Whether disabled	boolean	-	false

Event Name	Description	Parameters
close	Triggered when closing tag	(event: `MouseEvent`)
click	Triggered when clicking tag	(event: `MouseEvent`)

Slot Name	Description
default	Tag content

The tag component uses the following style variables, which can be customized through SCSS variables: