Badge
Badge generates a small badge to the top-right of its child(ren).
Basic badge
Examples of badges containing text, using primary and secondary colors. The badge is applied to its children.
Customization
Here is an example of customizing the component. You can learn more about this in the overrides documentation page.
The badge hides automatically when badgeContent is zero. You can override this with the showZero prop.
Dot badge
The dot prop changes a badge into a small dot. This can be used as a notification that something has changed without giving a count.
Badge overlap
You can use the overlap prop to place the badge relative to the corner of the wrapped element.
Badge alignment
You can use the anchorOrigin prop to move the badge to any corner of the wrapped element.
<Badge
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
>Accessibility
You can't rely on the content of the badge to be announced correctly.
You should provide a full description, for instance, with aria-label:
Experimental APIs
Material Design 3
The default Material UI Badge component follows the Material Design 2 specs.
To use the M3 version, install the experimental @mui/material-next package.
import Badge from '@mui/material-next/Badge';
<Badge badgeContent={4} />Playground
To learn more about Material UI's M3 implementation, visit the M3 Components documentation.
Unstyled
Use the Base UI Badge for complete ownership of the component's design, with no Material UI or Joy UI styles to override. This unstyled version of the component is the ideal choice for heavy customization with a smaller bundle size.