Badge ​

A number or status mark on buttons and icons.

Basic Usage ​

Displays the amount of new messages.

Max Value ​

You can customize the max value.

Customizations ​

Displays text content other than numbers.

Red Dot ​

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

Offset 2.7.0 ​

API ​

Attributes ​

NameDescriptionTypeDefault
valuedisplay value.string / number''
maxmaximum value, shows {max}+ when exceeded. Only works if value is a number.number99
is-dotif a little dot is displayed.booleanfalse
hiddenhidden badge.booleanfalse
typebadge type.enumdanger
show-zero 2.6.0Whether to show badge when value is zero.booleantrue
color 2.6.3background color of the dotstring
offset 2.7.0offset of badge[ number , number ]—
badge-style 2.7.1custom style of badgeobject—
badge-class 2.7.1custom class of badgestring—

Slots ​

NameDescription
defaultcustomize default content

Source ​

Component • Style • Docs

Contributors ​