Tag 标签

Basic · Display component

Compact status tags.

On-demand importwbbb-ui/components/tag

Basic Usage

Example code

<script setup lang="ts">
import { WbbbTag } from 'wbbb-ui/components/tag'
import 'wbbb-ui/styles/tag'
</script>

<template>
  <WbbbTag />
</template>

Live mobile previewOpen in a new tab ↗

States and Interaction

All listed states can be operated and verified in the live Playground preview.

DefaultPrimarySuccessWarningDangerInfo

API Reference

Props

Property	Description	Type	Default	Required
clickable	Marks the component as interactive and emits click events.	boolean	false	No
closable	Shows a close control and allows the item to be dismissed.	boolean	false	No
plain	Uses the outlined or low-emphasis visual style.	boolean	false	No
round	Uses fully rounded corners or a pill shape.	boolean	false	No
size	Sets the component size.	WbbbSize	'medium'	No
type	Sets the semantic type or variant of the component.	WbbbType	'default'	No

Events

• click
• close

Slots

• default

Two-way binding

Does not support v-model.

Platform Notes

Build verification: H5, App Vue, WeChat Mini Program, Alipay Mini Program, and Douyin Mini Program.

Runtime differences: H5 supports keyboard focus and reduced motion. Mini Programs provide equivalent touch interaction; verify upload, date selection, and overlays on target platforms.

Usage note: Use Playground to verify further state combinations and cross-platform behavior.