Badge
The Badge component generates a small label that is attached to its child element.
Badge API
Import
import { Badge } from '@mui/base/Badge';
// or
import { Badge } from '@mui/base';Props of the native component are also available.
| Name | Type | Default | Description |
|---|---|---|---|
| badgeContent | node | - | The content rendered within the badge. |
| children | node | - | The badge will be added relative to this node. |
| invisible | bool | false | If |
| max | number | 99 | Max count to show. |
| showZero | bool | false | Controls whether the badge is hidden when |
| 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. Either a string to use a HTML element or a component. See Slots API below for more details. |
The
ref is forwarded to the root element.