BadgeUnstyled API

API documentation for the React BadgeUnstyled component. Learn about the available props and the CSS API.

Import

import BadgeUnstyled from '@mui/base/BadgeUnstyled';
// or
import { BadgeUnstyled } from '@mui/base';

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 API below for more details.
component	elementType		The component used for the root node. Either a string to use a HTML element or a component.
components	{ Badge?: elementType, Root?: elementType }	{}	The components used for each slot inside the Badge. Either a string to use a HTML element or a component.
componentsProps	{ badge?: object, root?: object }	{}	The props used for each slot inside the Badge.
invisible	bool	false	If `true`, the badge is invisible.
max	number	99	Max count to show.
showZero	bool	false	Controls whether the badge is hidden when `badgeContent` is zero.
variant	string	'standard'	The variant to use.

The ref is forwarded to the root element.

Rule name	Global class	Description
root	.MuiBadge-root	Class name applied to the root element.
badge	.MuiBadge-badge	Class name applied to the badge `span` element.
dot	.MuiBadge-dot	Class name applied to the badge `span` element if `variant="dot"`.
standard	.MuiBadge-standard	Class name applied to the badge `span` element if `variant="standard"`.
anchorOriginTopRight	.MuiBadge-anchorOriginTopRight	Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }}`.
anchorOriginBottomRight	.MuiBadge-anchorOriginBottomRight	Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }}`.
anchorOriginTopLeft	.MuiBadge-anchorOriginTopLeft	Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }}`.
anchorOriginBottomLeft	.MuiBadge-anchorOriginBottomLeft	Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }}`.
invisible	.MuiBadge-invisible	State class applied to the badge `span` element if `invisible={true}`.

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.