Badge
Badge generates a small badge to the top-right of its child(ren).
Introduction
The badge component is most frequently used to signal status (online, offline, busy, etc) and whether there's notifications or not.
<Badge />
Playground
Component
After installation, you can start building with this component using the following basic elements:
import Badge from '@mui/joy/Badge';
export default function MyApp() {
return <Badge />;
}
Basic usage
The default appearance of the Badge
is a dot with a primary
color.
🛒
Press Enter to start editing
🛍
4🔔
❕Press Enter to start editing
The badge automatically hidden if badgeContent
is zero. You can change this by toggling on the showZero
prop.
🛍
0
🛍
12Press Enter to start editing
9999+999+
Press Enter to start editing
<Badge
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
>
Inset
The badgeInset
prop gives you precise control of the badge's position. Use a string value matching the inset CSS property syntax.
Press Enter to start editing
Accessibility
Make sure to always provide a meaningful description to the aria-label
prop, regardless if it is on the badge or the component wrapping it.
Press Enter to start editing