Skip to content


Badges are used to inform the user of the status of specific data.

Basic usage

Badge uses the error theme by default. You only need to set the value attribute to display the corresponding badge.

Custom color

The o variant handles contextual colors.

Badge can also be used as a dot. You can set dot attribute to display a dot. Dots have the highest priority.


Badge can display a number or a string. If the value is greater than 99, it will be displayed as 99+. Otherwise, you can set the max attribute to change the maximum value.

If the value is 0, it will not be displayed. You can set showZero attribute to display 0.

Badge Props

valuestring | numberundefinedDisplay badge content.
maxnumber99Greater than ${max}, display ${max}+.
dotbooleanfalseOnly a dot style.
showZerobooleanfalseWhether to display the number 0.

Badge Slots

default()Badge's content.

MIT Licensed