🌏 Translated with the assistance of DeepSeek and ChatGPT

Badge

A small badge component used to display counts, status, or indicators attached to other elements (for example, buttons or icons).

Basic

Use Badge to attach a small indicator to other elements.

8

Hide source code

Maximum

max sets the maximum value for the badge. When exceeded, it will be displayed as ${max}+.

5

99+

Hide source code

Dot Mode

Show a small dot only by setting dot to true.

Hide source code

Themes

Badge supports multiple themes: 'primary', 'sakura', 'success', 'warning', 'danger' and 'notice'.

1

1

4

5

1

4

Hide source code

Offset

Use offset to adjust the badge position. Accepts a number, a tuple [x: number, y: number], or an object { x: number, y: number }.

?

!

Hide source code

Custom Color

Set color to customize the badge background; set borderColor to change the badge border color.

99

Hide source code

Visibility

Control whether the badge is visible with the visible prop.

5

Hide source code

Content Slot

Use the content slot to fully customize the badge content when dot is false.

HOT

* HOT

Hide source code

API

BadgeProps

Attribute	Type	Optional	Default	Description	Version
value	number | string	True	''	The value or string displayed on the badge.	0.1.0
max	number	True		The maximum value. If exceeded, it displays as ${max}+.	0.1.0
dot	boolean	True	false	Whether to display as a small dot.	0.1.0
theme	'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'notice'	True	'danger'	Badge's theme.	0.1.0
visible	boolean	True	true	Whether it is visible.	0.1.0
offset	number | [number, number] | { x?: number; y?: number }	True	0	The offset of the badge marker.	0.1.0
color	string	True		Custom background color. See Supported Color Parsing.	0.1.0
borderColor	string	True		Custom border color.	0.1.0
contentProps	RestAttrs	True		Additional properties passed through to the badge content container DOM.	0.1.0
pollSizeChange	boolean	True	false	Enable polling for component size changes, which may affect performance.	0.1.0

BadgeSlots

Slot	Parameter	Description	Version
default		The slot for the wrapped attached element.	0.1.0
content	value: string | string	The slot for badge content (effective when dot is false).	0.1.0