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.
๐
<Badge>
<Typography fontSize="xl">๐</Typography>
</Badge>
๐
4๐
โ<Badge badgeContent={4}>
<Typography fontSize="xl">๐</Typography>
</Badge>
<Badge badgeContent="โ">
<Typography fontSize="xl">๐</Typography>
</Badge>
The badge automatically hidden if badgeContent
is zero.
You can change this by toggling on the showZero
prop.
๐
0
๐
12<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' }}
/>
<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>
<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>
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>
Unstyled
The component also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size.