Badge API
API reference docs for the React Badge component. Learn about the props, CSS, and other APIs of this exported module.
Demos
Import
import Badge from '@mui/material/Badge';
// or
import { Badge } from '@mui/material';Learn about the difference by reading this guide on minimizing bundle size.
Props of the native component are also available.
| Name | Type | Default | Description |
|---|---|---|---|
| anchorOrigin | { horizontal?: 'left' | 'right', vertical?: 'bottom' | 'top' } | { vertical: 'top', horizontal: 'right', } | The anchor of the badge. |
| badgeContent | node | - | The content rendered within the badge. |
| children | node | - | The badge will be added relative to this node. |
| classes | object | - | Override or extend the styles applied to the component. See CSS classes API below for more details. |
| color | 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | string | 'default' | The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide. |
| component | elementType | - | The component used for the root node. Either a string to use a HTML element or a component. |
| components | { Badge?: elementType, Root?: elementType } | {} | The components used for each slot inside. |
| componentsProps | { badge?: func | object, root?: func | object } | {} | The extra props for the slot components. You can override the existing props or add new ones. |
| invisible | bool | false | If |
| max | number | 99 | Max count to show. |
| overlap | 'circular' | 'rectangular' | 'rectangular' | Wrapped shape the badge should overlap. |
| showZero | bool | false | Controls whether the badge is hidden when |
| slotProps | { badge?: func | object, root?: func | object } | {} | The props used for each slot inside. |
| slots | { badge?: elementType, root?: elementType } | {} | The components used for each slot inside. |
| sx | Array<func | object | bool> | func | object | - | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. |
| variant | 'dot' | 'standard' | string | 'standard' | The variant to use. |
ref is forwarded to the root element.Theme default props
You can use MuiBadge to change the default props of this component with the theme.
| Slot name | Class name | Default component | Description |
|---|---|---|---|
| root | .MuiBadge-root | span | The component that renders the root. |
| badge | .MuiBadge-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 | Rule name | Description |
|---|---|---|
| .MuiBadge-anchorOriginBottomLeft | anchorOriginBottomLeft | Styles applied to the badge span element if anchorOrigin={{ 'bottom', 'left' }}. |
| .MuiBadge-anchorOriginBottomLeftCircular | anchorOriginBottomLeftCircular | Styles applied to the badge span element if anchorOrigin={{ 'bottom', 'left' }} overlap="circular". |
| .MuiBadge-anchorOriginBottomLeftRectangular | anchorOriginBottomLeftRectangular | Styles applied to the badge span element if anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular". |
| .MuiBadge-anchorOriginBottomRight | anchorOriginBottomRight | Styles applied to the badge span element if anchorOrigin={{ 'bottom', 'right' }}. |
| .MuiBadge-anchorOriginBottomRightCircular | anchorOriginBottomRightCircular | Styles applied to the badge span element if anchorOrigin={{ 'bottom', 'right' }} overlap="circular". |
| .MuiBadge-anchorOriginBottomRightRectangular | anchorOriginBottomRightRectangular | Styles applied to the badge span element if anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular". |
| .MuiBadge-anchorOriginTopLeft | anchorOriginTopLeft | Styles applied to the badge span element if anchorOrigin={{ 'top', 'left' }}. |
| .MuiBadge-anchorOriginTopLeftCircular | anchorOriginTopLeftCircular | Styles applied to the badge span element if anchorOrigin={{ 'top', 'left' }} overlap="circular". |
| .MuiBadge-anchorOriginTopLeftRectangular | anchorOriginTopLeftRectangular | Styles applied to the badge span element if anchorOrigin={{ 'top', 'left' }} overlap="rectangular". |
| .MuiBadge-anchorOriginTopRight | anchorOriginTopRight | Styles applied to the badge span element if anchorOrigin={{ 'top', 'right' }}. |
| .MuiBadge-anchorOriginTopRightCircular | anchorOriginTopRightCircular | Styles applied to the badge span element if anchorOrigin={{ 'top', 'right' }} overlap="circular". |
| .MuiBadge-anchorOriginTopRightRectangular | anchorOriginTopRightRectangular | Styles applied to the badge span element if anchorOrigin={{ 'top', 'right' }} overlap="rectangular". |
| .MuiBadge-colorError | colorError | Styles applied to the badge span element if color="error". |
| .MuiBadge-colorInfo | colorInfo | Styles applied to the badge span element if color="info". |
| .MuiBadge-colorPrimary | colorPrimary | Styles applied to the badge span element if color="primary". |
| .MuiBadge-colorSecondary | colorSecondary | Styles applied to the badge span element if color="secondary". |
| .MuiBadge-colorSuccess | colorSuccess | Styles applied to the badge span element if color="success". |
| .MuiBadge-colorWarning | colorWarning | Styles applied to the badge span element if color="warning". |
| .MuiBadge-dot | dot | Styles applied to the badge span element if variant="dot". |
| .MuiBadge-invisible | invisible | State class applied to the badge span element if invisible={true}. |
| .MuiBadge-overlapCircular | overlapCircular | Styles applied to the badge span element if overlap="circular". |
| .MuiBadge-overlapRectangular | overlapRectangular | Styles applied to the badge span element if overlap="rectangular". |
| .MuiBadge-standard | standard | Styles applied to the badge span element if variant="standard". |
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.
Source code
If you did not find the information in this page, consider having a look at the implementation of the component for more detail.