Badge

A number or status mark on buttons and icons.

Basic Usage

Displays the amount of new messages.

The amount is defined with value which accepts Number or String.

¹²

You can customize the max value.

The max value is defined by property max which is a Number. Note that it only works when value is also a Number.

⁹⁹⁺

¹⁰⁺

Displays text content other than numbers. Or you can use the content slot to customize content.

When value is a String, it can display customized text. Or use the content slot.

^new

^hot

⁹⁹

Use a red dot to mark content that needs to be noticed.

Use the attribute is-dot. It is a Boolean.

query

Set offset of the badge dot, the format is [left, top], which represents the offset of the status dot from the left and top of the default position.

Name	Description	Type	Default
value	display value.	`string` / `number`	''
max	maximum value, shows `{max}+` when exceeded. Only works if value is a number.	`number`	99
is-dot	if a little dot is displayed.	`boolean`	false
hidden	hidden badge.	`boolean`	false
type	badge type.	`enum`	danger
show-zero 2.6.0	Whether to show badge when value is zero.	`boolean`	true
color 2.6.3	background color of the dot	`string`
offset 2.7.0	offset of badge	[ `number` , `number` ]	—
badge-style 2.7.1	custom style of badge	`object`	—
badge-class 2.7.1	custom class of badge	`string`	—