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
| Name | Type | Default | Description |
|---|---|---|---|
| badgeContent | number | The badge counter value. | |
| showZero | bool | false | If true, the badge counter displays a zero value. |
| invisible | bool | flase | If true, the badge is hidden. |
| maximum | number | 99 | The maximum counter value to display. |
Style Attributes
| Name | Type | Default | Description |
|---|---|---|---|
| variant | dot standard string | standard | Specifies the type of variant to display. |
| color | default primary secondary error info success warning string | default | Defines the color of the badge. |
| overlap | circular rectangular | rectangular | Defines the wrapped shape the badge should overlap. |
| anchorOriginHorizontal | left right | right | The horizontal anchor position of the badge. |
| anchorOriginVertical | top bottom | top | The 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
| Name | Type | Default | Description |
|---|---|---|---|
| color | inherit primary secondary action disabled error string | inherit | Defines the color of the icon. |
| size | inherit small medium large | medium | Defines the size of the icon. |
| viewBox | 0 0 25 25 | Defines the size of the view box that displays the icon. | |
| fill | hex #ffffff rgb 5,5,5 | The fill color of the icon. | |
| stroke | hex #ffffff rgb 5,5,5 | The stroke color of the icon. |
For more detail on the Badge component, see the MUI developer docs.