Badge API

The API documentation of the Badge React component. Learn more about the properties and the CSS customization points.

import Badge from '@material-ui/core/Badge';

Props

Name	Type	Default	Description
badgeContent	node		The content rendered within the badge.
children *	node		The badge will be added relative to this node.
classes	object		Override or extend the styles applied to the component. See CSS API below for more details.
color	enum: 'default' \| 'primary' \| 'secondary' \| 'error'	'default'	The color of the component. It supports those theme colors that make sense for this component.
component	elementType	'span'	The component used for the root node. Either a string to use a DOM element or a component.
invisible	bool		If `true`, the badge will be invisible.
max	number	99	Max count to show.
showZero	bool	false	Controls whether the badge is hidden when `badgeContent` is zero.
variant	enum: 'standard' \| 'dot'	'standard'	The variant to use.

The ref is forwarded to the root element.

Any other properties supplied will be provided to the root element (native element).

You can override all the class names injected by Material-UI thanks to the classes property. This property accepts the following keys:

Name	Description
root	Styles applied to the root element.
badge	Styles applied to the badge `span` element.
colorPrimary	Styles applied to the root element if `color="primary"`.
colorSecondary	Styles applied to the root element if `color="secondary"`.
colorError	Styles applied to the root element if `color="error"`.
invisible	Styles applied to the badge `span` element if `invisible={true}`.
dot	Styles applied to the root element if `variant="dot"`.

If using the overrides key of the theme, you need to use the following style sheet name: MuiBadge.

The component is fully StrictMode compatible.