Skip to main content

Badge

The Badge component is a visual element that adds a badge to the top right of a child component, such as an icon.

Properties

NameTypeDefaultDescription
badgeContentnumberThe badge counter value.
showZeroboolfalseIf true, the badge counter displays a zero value.
invisibleboolflaseIf true, the badge is hidden.
maximumnumber99The maximum counter value to display.

Style Attributes

NameTypeDefaultDescription
variantdot
standard
string
standardSpecifies the type of variant to display.
colordefault
primary
secondary
error
info
success
warning
string
defaultDefines the color of the badge.
overlapcircular
rectangular
rectangularDefines the wrapped shape the badge should overlap.
anchorOriginHorizontalleft
right
rightThe horizontal anchor position of the badge.
anchorOriginVerticaltop
bottom
topThe vertical anchor position of the badge.

Subcomponents

The Badge component requires an icon child subcomponent.

Icon

Defines an Icon component used to support the badge component.

For further details, see the Icon component.

Properties

NameTypeDefaultDescription
colorinherit
primary
secondary
action
disabled
error
string
inheritDefines the color of the icon.
sizeinherit
small
medium
large
mediumDefines the size of the icon.
viewBox0 0 25 25
Defines the size of the view box that displays the icon.
fillhex #ffffff
rgb 5,5,5
The fill color of the icon.
strokehex #ffffff
rgb 5,5,5
The stroke color of the icon.

For more detail on the Badge component, see the MUI developer docs.

on this page
Was this article useful?
89% of our users said this content was useful.