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>1
The badge auto hides with badgeContent is zero. You can override this with the showZero property.
00
<Badge color="secondary" badgeContent={0}> <MailIcon /> </Badge> <Badge color="secondary" badgeContent={0} showZero> <MailIcon /> </Badge>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.
11299+999+
<Badge anchorOrigin={{ vertical: 'top', horizontal: 'right', }} >