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.

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>

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>

The badge automatically hidden if badgeContent is zero. You can change this by toggling on the showZero prop.

🛍

show zero

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' }}
/>

Maximum value

Use the max prop to cap the content to a maximum value.

9999+999+

<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>

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>

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.