Tag
🌏 Translated with the assistance of DeepSeek and ChatGPT
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', and 'sakura'.
Primary
Success
Warning
Danger
Info
Sakura
<template>
<px-space>
<px-tag>Primary</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
Success
Warning
Danger
Info
Sakura
Primary
Success
Warning
Danger
Info
Sakura
Primary
Success
Warning
Danger
Info
Sakura
<template>
<px-space direction="vertical">
<px-space>
<px-tag variant="plain">Primary</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="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="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, 16, 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, 20, 4]">[16, 8, 16, 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
Success
Warning
Danger
Info
Sakura
<template>
<px-space>
<px-tag disabled closable @close="closeHandler">Primary</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 | 'default' | 'round' | True | 'default' | Tag shape. | 0.0.2 |
| 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' | 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 |
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
ts
export type NumberOrPercentage = number | `${number}%`