Badge

Badge generates a small badge to the top-right of its child(ren).

Basic

The default appearance of the Badge is a dot with a primary color.

🛒

<Badge>
  <Typography fontSize="xl">🛒</Typography>
</Badge>

Content

Specify the badgeContent prop as a number | string to the Badge to display the content.

🛍

🔔

❕

<Badge badgeContent={4}>
  <Typography fontSize="xl">🛍</Typography>
</Badge>
<Badge badgeContent="❕">
  <Typography fontSize="xl">🔔</Typography>
</Badge>

The badge hides automatically when badgeContent is zero. You can override this with the showZero prop.

🛍

show zero

Visibility

The visibility of badges can be controlled 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

You can use the max prop to cap the value of the badge content.

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>

Inset

Use badgeInset prop to control the position of the badge. The value can be a string that match the CSS inset syntax.

<Badge badgeInset="14%" color="danger">
  <Avatar src="/static/images/avatar/1.jpg" />
</Badge>

Position

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:

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