Badge

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

Basic badges

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

444

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

Customized badges

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

Show Badge

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

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

Maximum value

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

9999+999+

<Badge badgeContent={99} {...defaultProps} />
<Badge badgeContent={100} {...defaultProps} />
<Badge badgeContent={1000} max={999} {...defaultProps} />

Dot badge

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

Typography

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

Badge overlap

You can use the overlap property 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

Top

Bottom

Horizontal

Right

Left

11299+999+

<Badge
  anchorOrigin={{
    vertical: 'top',
    horizontal: 'right',
  }}
>

API

<Badge />