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 />
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.
<Badge>
<Typography fontSize="xl">🛒</Typography>
</Badge>
Press Enter to start editing
Content
Use a string or number as value for the badgeContent prop to display content.
<Badge badgeContent={4}>
<Typography fontSize="xl">🛍</Typography>
</Badge>
<Badge badgeContent="❕">
<Typography fontSize="xl">🔔</Typography>
</Badge>
Press Enter to start editing
The badge automatically hidden if badgeContent is zero. You can change this by toggling on the showZero prop.
Visibility
Control the badge visibility using the invisible prop.
<Badge badgeContent={12} invisible={invisible}>
<Typography fontSize="xl">🛍</Typography>
</Badge>
<Switch
startDecorator="invisible"
checked={invisible}
onChange={(event) => setInvisible(event.target.checked)}
variant={invisible ? 'solid' : 'outlined'}
sx={{ '--Switch-track-width': '40px' }}
/>
Press Enter to start editing
Maximum value
Use the max prop to cap the content to a maximum value.
<Badge badgeContent={99}>
<MailIcon />
</Badge>
<Badge badgeContent={100} badgeInset="0 -6px 0 0">
<MailIcon />
</Badge>
<Badge badgeContent={1000} max={999} badgeInset="0 -12px 0 0">
<MailIcon />
</Badge>
Press Enter to start editing
Position
Use the anchorOrigin prop to control the badge position to any corner of the child element.
<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.
<Badge badgeInset="14%" color="danger">
<Avatar src="/static/images/avatar/1.jpg" />
</Badge>
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.
<IconButton color="neutral" aria-label={notificationsLabel(100)}>
<Badge badgeContent={100} badgeInset="-20%">
<MailIcon />
</Badge>
</IconButton>
Press Enter to start editing
Unstyled
The component also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size.
