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';Learn about the difference by reading this guide on minimizing bundle size.
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. |
ref is forwarded to the root element.To learn how to customize the slot, check out the Overriding component structure guide.
| Slot name | Class name | Default component | Description |
|---|---|---|---|
| root | .base-Badge-root | 'span' | The component that renders the root. |
| badge | .base-Badge-badge | 'span' | The component that renders the badge. |
These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.
| Class name | Description |
|---|---|
| .base-Badge-invisible | State class applied to the badge span element if invisible={true}. |