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.

Badge API

Badge 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.'primary' | 'success' | 'warning' | 'danger' | 'info''danger'

Badge Slots

NameDescription
defaultcustomize default content

Source

ComponentDocs

Contributors