Import

import Badge from '@mui/material/Badge';
// or
import { Badge } from '@mui/material';

Learn about the difference by reading this guide on minimizing bundle size.

Props of the native component are also available.

Name	Type	Default	Description
anchorOrigin	{ horizontal?: ‘left’ | ‘right’, vertical?: ‘bottom’ | ‘top’ }	{ vertical: ‘top’, horizontal: ‘right’ }	The anchor of the badge.
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 classes API below for more details.
color	‘default’ | ‘primary’ | ‘secondary’ | ‘error’ | ‘info’ | ‘success’ | ‘warning’ | string	‘default’	The color of the component. It supports both default and custom theme colors.
component	elementType	-	The component used for the root node.
components	{ Badge?: elementType, Root?: elementType }	{}	The components used for each slot inside.
componentsProps	{ badge?: func | object, root?: func | object }	{}	The extra props for the slot components.
invisible	bool	false	If true, the badge is invisible.
max	number	99	Max count to show.
overlap	‘circular’ | ‘rectangular’	‘rectangular’	Wrapped shape the badge should overlap.
showZero	bool	false	Controls whether the badge is hidden when badgeContent is zero.
slotProps	{ badge?: func | object, root?: func | object }	{}	The props used for each slot inside the Badge.
slots	{ badge?: elementType, root?: elementType }	{}	The components used for each slot inside the Badge.
sx	Array<func | object | bool> | func | object	-	The system prop that allows defining system overrides as well as additional CSS styles.
variant	‘dot’ | ‘standard’ | string	‘standard’	The variant to use.

The ref is forwarded to the root element.

Theme default props

You can use MuiBadge to change the default props of this component with the theme.

CSS Classes

These class names are useful for styling with CSS. They are applied to the component’s slots when specific states are triggered.

Class name	Rule name	Description
.MuiBadge-anchorOriginBottomLeft	anchorOriginBottomLeft	Styles applied to the badge span element if anchorOrigin={{ 'bottom', 'left' }}.
.MuiBadge-anchorOriginBottomLeftCircular	anchorOriginBottomLeftCircular	Styles applied to the badge span element if anchorOrigin={{ 'bottom', 'left' }} overlap="circular".
(… other classes omitted for brevity …)

You can override the style of the component using one of these customization options:

• With a global class name.
• With a rule name as part of the component’s styleOverrides property in a custom theme.

Source code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.