Badge

A number or status mark on buttons and icons.

Basic usage

Displays the amount of new messages.

¹²

Used in standalone when default slot is empty.

¹²

⁹⁹⁺

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. When value is a String, it can display customized text.

^new

^hot

We provide a variety of preset colors for the badge. And you can also set a custom color by the color property.

blue

red

green

yellow

pink

Name	Description	Type	Default
value	Display value	`String` `Number`	-
max	Maximum value, shows {max}+ when exceeded. Only works if value is a number	`Number`	-
is-dot	If a little dot is displayed	`Boolean`	false
hidden	Hidden badge	`Boolean`	false
type	Badge type	`String`	danger
color	Customize dot color	`String`	-
text	Set the display text of the status dot	`String`	-