Badge

A number or status mark on buttons and icons.

Basic usage

Displays the amount of new messages.

10

Max Value

You can customize the max value.

99+

Customizations

Displays text content other than numbers or different styles.

new
6
6
6
6

Red Dot

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


Badge Attributes

AttributeDescriptionTypeDefault
valuedisplay valuestring / number
maxmaximum value, shows {max}+ when exceeded. Only works if value is a numbernumber99
is-dotif a little dot is displayed.booleanfalse
hiddenhidden badgebooleanfalse
typebadge typeprimary / success / warning / danger / infodanger
content-classCSS class of contentstring

Badge Slots

NameDescription
defaultcustomize default content
Last Updated: 10/1/2022, 6:04:27 AM
Contributors: Tam Mai