Tag — Tags

17:06

Description

A small tag for marking and selection. It ships five theme colors, three modes (light / dark / plain), four shapes (square / round / roundLeft / roundRight), and two sizes (default / mini). With closeable a close icon appears and emits close; with disabled the tag is grayed out and emits no click. Use text for the label or the default slot for custom content.

Compatibility

Platform	Support
App	⚠️ Partial (the root uses display: flex, so a standalone tag takes a full row; wrap several tags in a flex container)
H5	✅ Supported
WeChat Mini Program	✅ Supported

Examples

Basic Usage

Set the theme type with the type parameter; it defaults to primary.

View source

<template>
    <view class="tag-row">
        <ux-tag text="primary" type="primary" custom-class="tag-spacing"></ux-tag>
        <ux-tag text="success" type="success" custom-class="tag-spacing"></ux-tag>
        <ux-tag text="warning" type="warning" custom-class="tag-spacing"></ux-tag>
        <ux-tag text="error" type="error" custom-class="tag-spacing"></ux-tag>
        <ux-tag text="info" type="info" custom-class="tag-spacing"></ux-tag>
    </view>
</template>

<style scoped>
.tag-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
.tag-spacing {
    margin-right: 10px;
    margin-bottom: 8px;
}
</style>

Setting Mode (mode)

dark (dark background), light (light background), plain (white background).

View source

<template>
    <view class="tag-row">
        <ux-tag text="深色" mode="dark" custom-class="tag-spacing"></ux-tag>
        <ux-tag text="浅色" mode="light" custom-class="tag-spacing"></ux-tag>
        <ux-tag text="镂空" mode="plain" custom-class="tag-spacing"></ux-tag>
    </view>
</template>

<style scoped>
.tag-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
.tag-spacing {
    margin-right: 10px;
    margin-bottom: 8px;
}
</style>

Setting Shape (shape)

square (small radius 3px, default), round (capsule), roundLeft (rounded left), roundRight (rounded right).

View source

<template>
    <view class="tag-row">
        <ux-tag text="小圆角" shape="square" custom-class="tag-spacing"></ux-tag>
        <ux-tag text="胶囊" shape="round" custom-class="tag-spacing"></ux-tag>
        <ux-tag text="左圆角" shape="roundLeft" custom-class="tag-spacing"></ux-tag>
        <ux-tag text="右圆角" shape="roundRight" custom-class="tag-spacing"></ux-tag>
    </view>
</template>

<style scoped>
.tag-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
.tag-spacing {
    margin-right: 10px;
    margin-bottom: 8px;
}
</style>

Setting Size (size)

default (default), mini (mini).

View source

<template>
    <view class="tag-row">
        <ux-tag text="默认大小" custom-class="tag-spacing"></ux-tag>
        <ux-tag text="迷你大小" size="mini" custom-class="tag-spacing"></ux-tag>
    </view>
</template>

<style scoped>
.tag-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
.tag-spacing {
    margin-right: 10px;
    margin-bottom: 8px;
}
</style>

Custom Colors

Customize the text, background, and border colors with color, bg-color, and border-color.

View source

<template>
    <view class="tag-row">
        <ux-tag text="自定义文字" color="#ff00ff" custom-class="tag-spacing"></ux-tag>
        <ux-tag text="自定义背景" bg-color="#2979ff" color="#ffffff" custom-class="tag-spacing"></ux-tag>
        <ux-tag text="自定义边框" mode="plain" color="#fa3534" border-color="#fa3534" custom-class="tag-spacing"></ux-tag>
    </view>
</template>

<style scoped>
.tag-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
.tag-spacing {
    margin-right: 10px;
    margin-bottom: 8px;
}
</style>

Closable (closeable)

Set closeable to true; tapping the close button triggers the close event.

View source

<template>
    <view class="tag-row">
        <ux-tag text="可关闭标签" closeable close-color="#fa3534" :show="show" @close="onClose"></ux-tag>
        <ux-tag text="深色可关闭" closeable mode="dark" :show="show2" @close="onClose2"></ux-tag>
    </view>
</template>

<script setup lang="uts">
const show = ref<boolean>(true);
const show2 = ref<boolean>(true);

function onClose(): void {
    show.value = false;
}

function onClose2(): void {
    show2.value = false;
}
</script>

<style scoped>
.tag-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
</style>

Disabled (disabled)

Set disabled to true to gray out the tag and make it unclickable.

View source

<template>
    <view class="tag-row">
        <ux-tag text="禁用标签" disabled custom-class="tag-spacing"></ux-tag>
        <ux-tag text="禁用深色" disabled mode="dark" custom-class="tag-spacing"></ux-tag>
    </view>
</template>

<style scoped>
.tag-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
.tag-spacing {
    margin-right: 10px;
    margin-bottom: 8px;
}
</style>

Custom Slot

Use the default slot to customize the tag content.

View source

<template>
    <ux-tag type="success">
        <text style="font-size: 11px; font-weight: bold;">自定义内容</text>
    </ux-tag>
</template>

API

Props

Property	Description	Type	Default	Version
customStyle	Custom root element style	string | UTSJSONObject	-	-
customClass	Custom root element style class	string	''	-
type	Theme type: primary / success / info / warning / error	ThemeType	'primary'	-
disabled	Whether disabled	boolean | string	false	-
size	Size: default / mini	TagSize	'default'	-
shape	Shape: square – 3px small radius (default), round – capsule, roundLeft / roundRight – one-sided capsule	TagShape	'square'	-
text	Text content to display	string | number	''	-
color	Text color	string	''	-
bgColor	Background color	string	''	-
borderColor	Border color	string	''	-
closeColor	Close button color	string	''	-
mode	Mode: light / dark / plain	TagMode	'light'	-
closeable	Whether closable	boolean	false	-
show	Whether to show	boolean	true	-

Events

Event	Description	Params	Version
click	Fires when the tag is tapped	event: UniEvent	-
close	Fires when the close button is tapped while closeable is true	event: UniEvent	-

Slots

Slot	Description	Version
default	Custom tag content (defaults to text)	-

Notes

1. With disabled no click event is emitted (the click handler returns early).
2. The close icon tap uses .stop, so it only emits close and does not also emit click.
3. close is a notification only and does not hide the tag; set show to false yourself (as the demo does).
4. Close-icon color priority: close-color > color > white in dark mode > type.
5. With mode="plain" and no border-color, the border takes the text color color.
6. There is no true sharp-corner shape option (square is a 3px small radius); for sharp corners use custom-style with an inline border-radius: 0.
7. On App the root uses display: flex (not inline-flex), so a standalone tag fills a row; put several tags in a flex container to line them up.