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
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 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. |
| 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.Slots
To learn how to customize the slot, check out the Overriding component structure guide.
| Name | Default class | Default HTML tag | Description |
|---|---|---|---|
| root | .MuiBadge-root | 'span' | The component that renders the root. |
| badge | .MuiBadge-badge | 'span' | The component that renders the badge. |
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
styleOverridesproperty in a custom theme.
CSS classes
These class names are useful for styling with CSS. They are applied to the root slot when specific states are triggered.
| Global class | Description |
|---|---|
| .MuiBadge-invisible | State class applied to the badge span element if invisible={true}. |