Skip to content
🚀  We're hiring a Designer, Full-stack Engineer, React Support Engineer, and more! 
Edit this page

Badge

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

Basic badge

Examples of badges containing text, using primary and secondary colors. The badge is applied to its children.

4
<Badge badgeContent={4} color="primary">
  <MailIcon color="action" />
</Badge>

Color

Use color prop to apply theme palette to component.

44
<Badge badgeContent={4} color="secondary">
  <MailIcon color="action" />
</Badge>
<Badge badgeContent={4} color="success">
  <MailIcon color="action" />
</Badge>

Customization

Here is an example of customizing the component. You can learn more about this in the overrides documentation page.

<IconButton aria-label="cart">
  <StyledBadge badgeContent={4} color="secondary">
    <ShoppingCartIcon />
  </StyledBadge>
</IconButton>

Badge visibility

The visibility of badges can be controlled using the invisible prop.

1

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

0
<Badge color="secondary" badgeContent={0}>
  <MailIcon />
</Badge>
<Badge color="secondary" badgeContent={0} showZero>
  <MailIcon />
</Badge>

Maximum value

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

9999+999+
<Badge color="secondary" badgeContent={99}>
  <MailIcon />
</Badge>
<Badge color="secondary" badgeContent={100}>
  <MailIcon />
</Badge>
<Badge color="secondary" badgeContent={1000} max={999}>
  <MailIcon />
</Badge>

Dot badge

The dot prop changes a badge into a small dot. This can be used as a notification that something has changed without giving a count.

<Badge color="secondary" variant="dot">
  <MailIcon />
</Badge>

Badge overlap

You can use the overlap prop to place the badge relative to the corner of the wrapped element.

<Badge color="secondary" badgeContent=" ">
  {rectangle}
</Badge>
<Badge color="secondary" badgeContent=" " variant="dot">
  {rectangle}
</Badge>
<Badge color="secondary" overlap="circular" badgeContent=" ">
  {circle}
</Badge>
<Badge color="secondary" overlap="circular" badgeContent=" " variant="dot">
  {circle}
</Badge>

Badge alignment

You can use the anchorOrigin prop to move the badge to any corner of the wrapped element.

Vertical
Horizontal
11299+999+
<Badge
  anchorOrigin={{
    vertical: 'top',
    horizontal: 'right',
  }}
>

Unstyled

The badge also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size.

import BadgeUnstyled from '@mui/base/BadgeUnstyled';
5
<StyledBadge badgeContent={5}>
  <BadgeContent />
</StyledBadge>
<StyledBadge badgeContent={5} variant="dot">
  <BadgeContent />
</StyledBadge>

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 aria-label={notificationsLabel(100)}>
  <Badge badgeContent={100} color="secondary">
    <MailIcon />
  </Badge>
</IconButton>

API