Badge
The Badge component generates a small label that is attached to its child element.
useBadge API
Import
import useBadge from '@mui/base/useBadge';
// or
import { useBadge } from '@mui/base';Parameters
| 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. |
Return value
| 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. |