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.

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

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

Press Enter to start editing

Color

Use color prop to apply theme palette to component.

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

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

Press Enter to start editing

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>

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

Press Enter to start editing

Badge visibility

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

Show Badge

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

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

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

Press Enter to start editing

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>

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

Press Enter to start editing

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 color="secondary" variant="dot">
  <MailIcon />
</Badge>

Press Enter to start editing

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

Press Enter to start editing

Badge alignment

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

Vertical

TopBottom

Horizontal

RightLeft

11299+999+

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

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

Press Enter to start editing

Unstyled

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

API

<Badge />