Unstyled badge

The `BadgeUnstyled` component generates a small label that is attached to its children elements.

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

Basic usage

Badge visibility

You can control the visibility of a BadgeUnstyled by using the invisible prop. Setting a badge to invisible does not actually hide it—instead, this prop adds the MuiBadge-invisible class to the badge, which you can target with styles to hide however you prefer:

1Show Badge

Numerical badges

The following props are useful when badgeContent is a number.

The showZero prop

By default, badges automatically hide when badgeContent={0}. You can override this behavior with the showZero prop:

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

The max prop

You can use the max prop to set a maximum value for badgeContent. The default is 99.

9999+999+

<StyledBadge badgeContent={99}>
  <MailIcon />
</StyledBadge>
<StyledBadge badgeContent={100}>
  <MailIcon />
</StyledBadge>
<StyledBadge badgeContent={1000} max={999}>
  <MailIcon />
</StyledBadge>

Accessibility

Screen readers may not provide users with enough information about a badge's contents. To make your BadgeUnstyled accessible, you must provide a full description with aria-label:

99+

API

<BadgeUnstyled />