Unstyled badge

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

import BadgeUnstyled from '@mui/base/BadgeUnstyled';

Basic usage

Badge visibility

The visibility of badges can be controlled using the invisible prop. If a badge is invisible, it has the MuiBadge-invisible class. It is up to the developer to provide styles that actually hide the badge.

1Show Badge

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

<StyledBadge badgeContent={0}>
  <MailIcon />
</StyledBadge>
<StyledBadge badgeContent={0} showZero>
  <MailIcon />
</StyledBadge>

Maximum value

You can use the max prop to cap the value of the badge content. It is set to 99 by default.

Note that badgeContent should be a number (or convertible to a number) for this to work.

9999+999+

<StyledBadge badgeContent={99}>
  <MailIcon />
</StyledBadge>
<StyledBadge badgeContent={100}>
  <MailIcon />
</StyledBadge>
<StyledBadge badgeContent={1000} max={999}>
  <MailIcon />
</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:

99+

API

<BadgeUnstyled />