Tag

Used to mark status or summarize main content.

Component Types

Basic Usage

Set different tag types through type.

<wd-tag>Tag</wd-tag>
<wd-tag type="primary">Common Tag</wd-tag>
<wd-tag type="danger">Danger Tag</wd-tag>
<wd-tag type="warning">Warning Tag</wd-tag>
<wd-tag type="success">Success Tag</wd-tag>

Component Variants

Tag Size

Set tag size through size, supports small, medium, default, large, extra-large.

<wd-tag type="primary" size="small">Small Tag</wd-tag>
<wd-tag type="primary" size="medium">Medium Tag</wd-tag>
<wd-tag type="primary">Default Tag</wd-tag>
<wd-tag type="primary" size="large">Large Tag</wd-tag>
<wd-tag type="primary" size="extra-large">Extra Large Tag</wd-tag>

Light Tag

Setting variant="light" displays a light-colored tag.

<wd-tag variant="light">Tag</wd-tag>
<wd-tag type="primary" variant="light">Common Tag</wd-tag>
<wd-tag type="danger" variant="light">Danger Tag</wd-tag>

Plain Tag

Setting variant="plain" displays a plain style.

<wd-tag variant="plain">Tag</wd-tag>
<wd-tag type="primary" variant="plain">Common Tag</wd-tag>

Dashed Tag

Setting variant="dashed" displays a dashed border.

<wd-tag variant="dashed">Tag</wd-tag>
<wd-tag type="warning" variant="dashed">Warning Tag</wd-tag>

Text Tag

Setting variant="text" displays a plain text style.

<wd-tag variant="text">Tag</wd-tag>
<wd-tag type="success" variant="text">Success Tag</wd-tag>

Component Styles

Mark Tag

Setting mark generates a mark style.

<wd-tag mark>Tag</wd-tag>
<wd-tag type="primary" mark>Common Tag</wd-tag>

Ghost Mark Tag

Combining mark and variant="plain" displays a ghost mark style.

<wd-tag mark variant="plain">Tag</wd-tag>
<wd-tag type="success" mark variant="plain">Success Tag</wd-tag>

Round Tag

Setting round generates a round style.

<wd-tag round>Tag</wd-tag>
<wd-tag type="primary" round>Common Tag</wd-tag>

Set Icon

You can customize the left icon through the icon property or icon slot.

<wd-tag icon="clock-circle" type="primary" mark>Tag</wd-tag>

<wd-tag type="primary" mark>
  <text>Slot</text>
  <template #icon>
    <wd-icon name="thunderbolt" />
  </template>
</wd-tag>

Custom Color

Set text color through color, and set background color and border color through bg-color.

<wd-tag color="#0083ff" bg-color="#d0e8ff">Tag</wd-tag>
<wd-tag color="#FAA21E" bg-color="#FAA21E" variant="plain">Tag</wd-tag>

Special Styles

Closable

After setting closable, clicking the close button will trigger the close event.

<wd-tag v-for="(tag, index) in closableStrongTags" :key="index" :type="tag.type" closable @close="handleCloseStrongTag(index)">
  {{ tag.value }}
</wd-tag>

const closableStrongTags = ref([
  { type: 'default', value: 'Tag' },
  { type: 'primary', value: 'Common' }
])

function handleCloseStrongTag(order: number) {
  closableStrongTags.value = closableStrongTags.value.filter((_, index) => index !== order)
}

Add Tag

Setting dynamic generates an add tag style. After input confirmation, the confirm event is triggered. You can customize the add button content through the add slot.

vue

<wd-tag v-for="(tag, index) in dynamicTags" :key="index" type="primary" closable @close="handleClose1(index)">
  {{ tag }}
</wd-tag>
<wd-tag type="primary" dynamic @confirm="handleConfirm"></wd-tag>
<wd-tag type="primary" dynamic @confirm="handleConfirm">
  <template #add>
    <wd-icon name="pushpin" size="12px"></wd-icon>
    <text style="margin-left: 4px">Custom</text>
  </template>
</wd-tag>

ts

const dynamicTags = ref(['Tag One', 'Tag Two'])

function handleClose1(order: number) {
  dynamicTags.value = dynamicTags.value.filter((item, index) => index !== order)
}

function handleConfirm({ value }: { value: string }) {
  if (!value) return
  dynamicTags.value = [...dynamicTags.value, value]
}

Attributes

Parameter	Description	Type	Default Value
size	Tag size, optional values are small, medium, large, extra-large, default	TagSize	default
type	Tag type, optional values are default, primary, success, warning, danger, volcano, lightblue, cyan, pink, purple	TagType	default
icon	Left icon	string	''
closable	Whether closable	boolean	false
dynamic	Whether it is an add tag	boolean	false
color	Text color	string	''
bg-color	Background color and border color	string	''
round	Whether round	boolean	false
mark	Whether mark style	boolean	false
variant	Tag variant, optional values are light, dark, plain, dashed, text	TagVariant	dark
custom-class	Root node custom class name	string	''
custom-style	Root node custom style	string	''

Events

Event Name	Description	Parameters
click	Triggered when clicking tag	MouseEvent
close	Triggered when clicking close button	MouseEvent
confirm	Triggered after add tag input confirmation	{ value: string }

Slots

Name	Description
default	Tag content
icon	Custom icon
add	Custom add tag content, effective when dynamic is true

External Style Classes

Class Name	Description
custom-class	Root node style class
custom-style	Root node inline style

主题定制

CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。

名称	默认值	描述
--wot-tag-color	$text-white	基础文字颜色
--wot-tag-font-size	$typography-label-size-main	基础字号
--wot-tag-radius	$radius-small	默认圆角
--wot-tag-round-radius	$radius-radius-full	圆角标签圆角
--wot-tag-mark-radius	$radius-large $radius-main	标记标签圆角
--wot-tag-icon-spacing	$spacing-ultra-tight	图标间距
--wot-tag-input-width	$n-64	输入态宽度
--wot-tag-primary-light-bg	$primary-1	主色浅色背景
--wot-tag-primary-bg	$primary-6	主色背景
--wot-tag-primary-color	$primary-6	主色文字颜色
--wot-tag-success-bg	$success-main	成功色背景
--wot-tag-success-light-bg	$success-surface	成功色浅色背景
--wot-tag-success-color	$success-main	成功色文字颜色
--wot-tag-warning-bg	$warning-main	警告色背景
--wot-tag-warning-light-bg	$warning-surface	警告色浅色背景
--wot-tag-warning-color	$warning-main	警告色文字颜色
--wot-tag-danger-bg	$danger-main	危险色背景
--wot-tag-danger-light-bg	$danger-surface	危险色浅色背景
--wot-tag-danger-color	$danger-main	危险色文字颜色
--wot-tag-volcano-bg	$volcano-6	橘火色背景
--wot-tag-volcano-light-bg	$volcano-1	橘火色浅色背景
--wot-tag-volcano-color	$volcano-6	橘火色文字颜色
--wot-tag-info-bg	$text-auxiliary	默认信息色背景
--wot-tag-info-light-bg	$filled-content	默认信息色浅色背景
--wot-tag-info-color	$text-secondary	默认信息色文字颜色
--wot-tag-lightblue-bg	$lightblue-6	亮蓝色背景
--wot-tag-lightblue-light-bg	$lightblue-1	亮蓝色浅色背景
--wot-tag-lightblue-color	$lightblue-6	亮蓝色文字颜色
--wot-tag-cyan-bg	$cyan-6	青色背景
--wot-tag-cyan-light-bg	$cyan-1	青色浅色背景
--wot-tag-cyan-color	$cyan-6	青色文字颜色
--wot-tag-pink-bg	$pink-6	粉色背景
--wot-tag-pink-light-bg	$pink-1	粉色浅色背景
--wot-tag-pink-color	$pink-6	粉色文字颜色
--wot-tag-purple-bg	$purple-6	紫色背景
--wot-tag-purple-light-bg	$purple-1	紫色浅色背景
--wot-tag-purple-color	$purple-6	紫色文字颜色
--wot-tag-small-font-size	$typography-label-size-small	小尺寸字号
--wot-tag-small-line-height	$typography-label-line--height-size-small	小尺寸行高
--wot-tag-small-padding	$padding-zero $padding-super-tight	小尺寸内边距
--wot-tag-small-round-padding	$padding-zero $padding-tight	小尺寸圆角态内边距
--wot-tag-small-icon-size	$n-10	小尺寸图标尺寸
--wot-tag-medium-font-size	$typography-label-size-main	中尺寸字号
--wot-tag-medium-line-height	$typography-label-line--height-size-main	中尺寸行高
--wot-tag-medium-padding	$n-1 $padding-super-tight	中尺寸内边距
--wot-tag-medium-round-padding	$n-1 $padding-tight	中尺寸圆角态内边距
--wot-tag-medium-icon-size	$n-10	中尺寸图标尺寸
--wot-tag-default-font-size	$typography-label-size-main	默认尺寸字号
--wot-tag-default-line-height	$typography-label-line--height-size-main	默认尺寸行高
--wot-tag-default-padding	$n-3 $padding-extra-tight	默认尺寸内边距
--wot-tag-default-round-padding	$n-3 $padding-loose	默认尺寸圆角态内边距
--wot-tag-default-icon-size	$n-12	默认尺寸图标尺寸
--wot-tag-large-font-size	$typography-label-size-large	大尺寸字号
--wot-tag-large-line-height	$typography-label-line--height-size-large	大尺寸行高
--wot-tag-large-padding	$n-3 $padding-extra-tight	大尺寸内边距
--wot-tag-large-round-padding	$n-3 $padding-loose	大尺寸圆角态内边距
--wot-tag-large-icon-size	$n-12	大尺寸图标尺寸
--wot-tag-extra-large-font-size	$typography-body-size-main	超大尺寸字号
--wot-tag-extra-large-line-height	$typography-body-line--height-size-main	超大尺寸行高
--wot-tag-extra-large-padding	$n-3 $padding-extra-tight	超大尺寸内边距
--wot-tag-extra-large-round-padding	$n-3 $padding-loose	超大尺寸圆角态内边距
--wot-tag-extra-large-icon-size	$n-12	超大尺寸图标尺寸

Source Code

Documentation

• Component