Components
Badge
Variants and Sizes
Badges come in different variants and sizes to suit various use cases.
default
default
smdefault
mddefault
lgwarning
warning
smwarning
mdwarning
lgorange
orange
smorange
mdorange
lgsuccess
success
smsuccess
mdsuccess
lggreen
green
smgreen
mdgreen
lggray
gray
smgray
mdgray
lgblue
blue
smblue
mdblue
lgred
red
smred
mdred
lgerror
error
smerror
mderror
lggrayWithoutHover
grayWithoutHover
smgrayWithoutHover
mdgrayWithoutHover
lgWith Icons
Badges can include icons to provide additional visual context.
default
Iconwarning
Iconorange
Iconsuccess
Icongreen
Icongray
Iconblue
Iconred
Iconerror
IcongrayWithoutHover
IconWith Dots
Badges can include dots, useful for showing status or notifications.
default
Dotwarning
Dotorange
Dotsuccess
Dotgreen
Dotgray
Dotblue
Dotred
Doterror
DotgrayWithoutHover
DotInteractive
Badges can be made interactive with click handlers.
Clickable
Clickable
Clickable
Clickable
Clickable
Clickable
Clickable
Clickable
Clickable
Clickable
Rounded
Badges can be fully rounded, useful for numerical indicators.
1
default1
warning1
orange1
success1
green1
gray1
blue1
red1
error1
grayWithoutHover