Badge

The Badge component generates a small label that is attached to its child element.

useBadge API

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

Name	Type	Default	Description
badgeContent	React.ReactNode	-	The content rendered within the badge.
invisible	boolean	false	If `true`, the badge is invisible.
max	number	99	Max count to show.
showZero	boolean	false	Controls whether the badge is hidden when `badgeContent` is zero.

Name	Type	Description
badgeContent	React.ReactNode	Defines the content that's displayed inside the badge.
displayValue	React.ReactNode	Value to be displayed in the badge. If `badgeContent` is greater than `max`, it will return `max+`.
invisible	boolean	If `true`, the component will not be visible.
max	number	Maximum number to be displayed in the badge.