🌏 Translated with the assistance of DeepSeek and ChatGPT

Tag

Generally used to display the features (not referring to bugs) of something.

Theme

Like buttons, tags have several different color themes: 'primary' (default), 'success', 'warning', 'danger', 'info', 'sakura' and 'notice'.

Primary

Notice

Success

Warning

Danger

Info

Sakura

<template>
	<px-space>
		<px-tag>Primary</px-tag>
		<px-tag theme="notice">Notice</px-tag>
		<px-tag theme="success">Success</px-tag>
		<px-tag theme="warning">Warning</px-tag>
		<px-tag theme="danger">Danger</px-tag>
		<px-tag theme="info">Info</px-tag>
		<px-tag theme="sakura">Sakura</px-tag>
	</px-space>
</template>

Tag Variants

Tags also have several different style variants: 'primary' (default), 'plain', and 'outline'.

Primary

Notice

Success

Warning

Danger

Info

Sakura

Primary

Notice

Success

Warning

Danger

Info

Sakura

Primary

Notice

Success

Warning

Danger

Info

Sakura

<template>
	<px-space direction="vertical">
		<px-space>
			<px-tag variant="plain">Primary</px-tag>
			<px-tag variant="plain" theme="notice">Notice</px-tag>
			<px-tag variant="plain" theme="success">Success</px-tag>
			<px-tag variant="plain" theme="warning">Warning</px-tag>
			<px-tag variant="plain" theme="danger">Danger</px-tag>
			<px-tag variant="plain" theme="info">Info</px-tag>
			<px-tag variant="plain" theme="sakura">Sakura</px-tag>
		</px-space>
		<px-space>
			<px-tag>Primary</px-tag>
			<px-tag theme="notice">Notice</px-tag>
			<px-tag theme="success">Success</px-tag>
			<px-tag theme="warning">Warning</px-tag>
			<px-tag theme="danger">Danger</px-tag>
			<px-tag theme="info">Info</px-tag>
			<px-tag theme="sakura">Sakura</px-tag>
		</px-space>
		<px-space>
			<px-tag variant="outline">Primary</px-tag>
			<px-tag variant="outline" theme="notice">Notice</px-tag>
			<px-tag variant="outline" theme="success">Success</px-tag>
			<px-tag variant="outline" theme="warning">Warning</px-tag>
			<px-tag variant="outline" theme="danger">Danger</px-tag>
			<px-tag variant="outline" theme="info">Info</px-tag>
			<px-tag variant="outline" theme="sakura">Sakura</px-tag>
		</px-space>
	</px-space>
</template>

Tag Sizes

Tags come in different sizes.

Small

Medium

Large

<template>
	<px-space>
		<px-tag size="small">Small</px-tag>
		<px-tag theme="danger">Medium</px-tag>
		<px-tag size="large" theme="sakura">Large</px-tag>
	</px-space>
</template>

Rounded Borders

Tags have rounded corners.

Default

Round

[16, 8, 12, 4]

<template>
	<px-space>
		<px-tag>Default</px-tag>
		<px-tag theme="success" shape="round">Round</px-tag>
		<px-tag theme="warning" :border-radius="[16, 8, 12, 4]">[16, 8, 12, 4]</px-tag>
	</px-space>
</template>

Close Button

Tags can have a close button.

Primary

Success

Warning

Danger

Info

Sakura

<template>
	<px-space>
		<px-tag closable @close="closeHandler">Primary</px-tag>
		<px-tag closable @close="closeHandler" theme="success">Success</px-tag>
		<px-tag closable @close="closeHandler" theme="warning">Warning</px-tag>
		<px-tag closable @close="closeHandler" theme="danger">Danger</px-tag>
		<px-tag closable @close="closeHandler" theme="info">Info</px-tag>
		<px-tag closable @close="closeHandler" theme="sakura">Sakura</px-tag>
	</px-space>
</template>
<script setup lang="ts">
const closeHandler = () => {
	$message.info('Tag close')
}
</script>

Disabled State

The close button is disabled when the tag is disabled.

Primary

Notice

Success

Warning

Danger

Info

Sakura

<template>
	<px-space>
		<px-tag disabled closable @close="closeHandler">Primary</px-tag>
		<px-tag disabled closable @close="closeHandler" theme="notice">Notice</px-tag>
		<px-tag disabled closable @close="closeHandler" theme="success">Success</px-tag>
		<px-tag disabled closable @close="closeHandler" theme="warning">Warning</px-tag>
		<px-tag disabled closable @close="closeHandler" theme="danger">Danger</px-tag>
		<px-tag disabled closable @close="closeHandler" theme="info">Info</px-tag>
		<px-tag disabled closable @close="closeHandler" theme="sakura">Sakura</px-tag>
	</px-space>
</template>
<script setup lang="ts">
const closeHandler = () => {
	$message.info('Tag close')
}
</script>

Custom Color

You can customize the main color. A complete color palette will be generated based on this color, which takes precedence over the preset palette provided by theme. Supports CSS-like 'rgb(r, g, b)' and 'rgba(r, g, b, a)' strings, as well as 3, 4, 6, or 8-digit hexadecimal values.

#409EFF

#FAE13C

#E956AE

#909399

<template>
	<px-space>
		<px-tag color="#409EFF">#409EFF</px-tag>
		<px-tag color="#FAE13C">#FAE13C</px-tag>
		<px-tag color="#E956AE">#E956AE</px-tag>
		<px-tag color="#909399">#909399</px-tag>
	</px-space>
</template>

API

TagProps

Attribute	Type	Optional	Default	Description	Version
borderRadius	NumberOrPercentage | NumberOrPercentage[]	True		Border radius, takes precedence over shape, and behaves the same as CSS border-radius. A single value or an array of length 1 → applies to all four corners; array of length 2 → [top left & bottom right, top right & bottom left]; array of length 3 → [top left, top right & bottom left, bottom right]; array of length 4 → applies to each corner in clockwise order.	0.0.2
shape	'rect' | 'round'	True	'rect'	Tag shape.	0.0.3
size	'medium' | 'large' | 'small'	True	'medium'	Tag size.	0.0.2
disabled	boolean	True	false	Whether the tag is disabled.	0.0.2
variant	'primary' | 'plain' | 'outline'	True	'primary'	Tag style variant.	0.0.2
theme	'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'info' | 'notice'	True	'primary'	Tag theme.	0.0.2
color	string	True		Custom main color. A complete color palette will be generated based on this color, which takes precedence over the preset palette provided by theme. Supports CSS-like 'rgb(r, g, b)' and 'rgba(r, g, b, a)' strings, as well as 3, 4, 6, or 8-digit hexadecimal values.	0.0.2
closable	boolean	True		Whether the tag can be closed.	0.0.2
pollSizeChange	boolean	True	false	Enables polling for component size changes. This may impact performance. It is typically used to resolve abnormal canvas rendering that occurs when the component's size is affected by its container element.	0.1.0

TagEvents

Event	Parameter	Description	Version
close	e: MouseEvent	Close event.	0.0.2

TagSlots

Slot	Parameter	Description	Version
default		Tag content.	0.0.2

NumberOrPercentage

export type NumberOrPercentage = number | `${number}%`