Badge 徽标

Basic · Display component

Numeric badges and status dots.

On-demand importwbbb-ui/components/badge

Basic Usage

Example code

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

<template>
  <WbbbBadge />
</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
dot	Displays the badge as a small status dot.	boolean	false	No
max	Sets the maximum allowed numeric value.	number	99	No
showZero	Keeps a zero value visible in a badge.	boolean	false	No
type	Sets the semantic type or variant of the component.	WbbbType	'danger'	No
value	Provides the displayed value or item value.	number \| string	''	No

Events

None

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.