BadgeUnstyled API

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

Import

import BadgeUnstyled from '@material-ui/unstyled/BadgeUnstyled';
// или
import { BadgeUnstyled } from '@material-ui/unstyled';

You can learn about the difference by reading this guide on minimizing bundle size.

Props

Имя	Тип	По-умолчанию	Описание
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	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.
overlap	'circular' \| 'rectangular'	'rectangular'	Wrapped shape the badge should overlap.
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.
Any other props supplied will be provided to the root element (native element).

CSS

Rule name	Global class	Описание
root	.MuiBadge-root	Styles 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"`.
anchorOriginTopRightRectangular	.MuiBadge-anchorOriginTopRightRectangular	Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangular"`.
anchorOriginBottomRightRectangular	.MuiBadge-anchorOriginBottomRightRectangular	Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular"`.
anchorOriginTopLeftRectangular	.MuiBadge-anchorOriginTopLeftRectangular	Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangular"`.
anchorOriginBottomLeftRectangular	.MuiBadge-anchorOriginBottomLeftRectangular	Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular"`.
anchorOriginTopRightCircular	.MuiBadge-anchorOriginTopRightCircular	Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }} overlap="circular"`.
anchorOriginBottomRightCircular	.MuiBadge-anchorOriginBottomRightCircular	Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circular"`.
anchorOriginTopLeftCircular	.MuiBadge-anchorOriginTopLeftCircular	Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap="circular"`.
anchorOriginBottomLeftCircular	.MuiBadge-anchorOriginBottomLeftCircular	Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circular"`.
invisible	.MuiBadge-invisible	Pseudo-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.

Demos

Badges