Mui Badge

import : 
import Badge from '@mui/material/Badge';
import MailIcon from '@mui/icons-material/Mail';

component : basic

<Badge badgeContent={0} color="primary">
     <MailIcon />
</Badge>
0
<Badge badgeContent={0} color="primary" showZero>
     <MailIcon />
</Badge>
4
<Badge badgeContent={4} color="primary">
     <MailIcon />
</Badge>
4
<Badge badgeContent={4} color="secondary">
     <MailIcon />
</Badge>
4
<Badge badgeContent={4} color="error">
     <MailIcon />
</Badge>
4
<Badge badgeContent={4} color="warning">
     <MailIcon />
</Badge>
4
<Badge badgeContent={4} color="success">
     <MailIcon />
</Badge>
4
<Badge badgeContent={4} color="info">
     <MailIcon />
</Badge>

component : Maximum value
99
<Badge badgeContent={99} color="primary">
     <MailIcon />
</Badge>
99+
<Badge badgeContent={100} color="primary">
     <MailIcon />
</Badge>
999+
<Badge badgeContent={1000} max={999} color="primary">
     <MailIcon />
</Badge>

component : dot

<Badge variant="dot" color="primary">
     <MailIcon />
</Badge>

component : alignment
4
<Badge
      badgeContent={4}
      color="primary"
      anchorOrigin={{
           vertical: 'top',
           horizontal: 'left',
      }}
>
     <MailIcon />
</Badge>
4
<Badge
      badgeContent={4}
      color="primary"
      anchorOrigin={{
           vertical: 'top',
           horizontal: 'right',
      }}
>
     <MailIcon />
</Badge>
4
<Badge
      badgeContent={4}
      color="primary"
      anchorOrigin={{
           vertical: 'bottom',
           horizontal: 'left',
      }}
>
     <MailIcon />
</Badge>
4
<Badge
      badgeContent={4}
      color="primary"
      anchorOrigin={{
           vertical: 'bottom',
           horizontal: 'right',
      }}
>
     <MailIcon />
</Badge>

component : Customization
import : 
import Badge, { BadgeProps } from '@mui/material/Badge'; 
import { styled } from '@mui/material/styles';
const StyledBadge = styled(Badge)<BadgeProps>(({ theme }) => ({
     '& .MuiBadge-badge': {
            right: -3,
            top: 13,
            border: `2px solid ${(theme.vars ?? theme).palette.background.paper}`,
            padding: '0 4px',
      },
}));
4
<StyledBadge badgeContent={4} color="primary">
     <MailIcon />
</StyledBadge >