Badges

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

Simple Badges

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

Customized badges

Here are some examples of customizing the component. You can learn more about this in the overrides documentation page.

Badge visibility

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

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

Maximum Value

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

<Box display="flex">
  <Box m={2}>
    <Badge badgeContent={99} color="primary">
      <MailIcon />
    </Badge>
  </Box>
  <Box m={2}>
    <Badge badgeContent={100} color="primary">
      <MailIcon />
    </Badge>
  </Box>
  <Box m={2}>
    <Badge badgeContent={1000} max={999} color="primary">
      <MailIcon />
    </Badge>
  </Box>
</Box>

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.

<Box display="flex">
  <Box m={2}>
    <Badge color="primary" variant="dot">
      <MailIcon />
    </Badge>
  </Box>
  <Box m={2}>
    <Badge color="secondary" variant="dot">
      <MailIcon />
    </Badge>
  </Box>
  <Box m={2}>
    <Badge color="error" variant="dot">
      <Typography>Typography</Typography>
    </Badge>
  </Box>
</Box>

Badge overlap

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

Badge alignment

You can use the horizontalAlignment and verticalAlignment properties to move the badge to any corner of the wrapped element.

API

• <Badge />