Badges

<>
  <div>
    <Badge
      badgeContent={4}
      role="img"
      aria-label="4 new messages"
      color="primary"
      margin={{ right: 2 }}
    >
      <Mail />
    </Badge>
    <Badge
      badgeContent={10}
      role="img"
      aria-label="10 new messages"
      color="secondary"
      margin={{ right: 2 }}
    >
      <Mail />
    </Badge>
    <IconButton aria-label="4 new messages">
      <Badge badgeContent={4} color="primary">
        <Mail />
      </Badge>
    </IconButton>
  </div>
  <AppBar color="neutral" position="static" margin={{ y: 4 }}>
    <Tabs value={0}>
      <Tab
        label={
          <Badge color="secondary" badgeContent={4} padding={{ x: 2 }}>
            Inbox <Typography variant="srOnly">4 new messages</Typography>
          </Badge>
        }
      />
      <Tab label="Sent" />
      <Tab label="Trash" />
    </Tabs>
  </AppBar>
  <Badge color="primary" badgeContent={4} margin={{ right: 4 }}>
    <Typography padding={1}>
      Typography <Typography variant="srOnly">4 items pending</Typography>
    </Typography>
  </Badge>
  <Badge color="primary" badgeContent={4}>
    <Button variant="outlined" color="secondary" aria-label="Button (4 items pending)">
      Button
    </Button>
  </Badge>
</>

class BadgeVisibility extends React.Component {
  constructor(props) {
    super(props);

    this.handleBadgeVisibility = this.handleBadgeVisibility.bind(this);

    this.state = {
      invisible: false,
    };
  }

  handleBadgeVisibility() {
    this.setState((prevState) => ({ invisible: !prevState.invisible }));
  }

  render() {
    return (
      <Grid container spacing={3} justify="center" alignItems="center" direction="column">
        <Grid item md={3}>
          <Badge
            color="secondary"
            badgeContent={!this.state.invisible && 4}
            role="img"
            aria-label={!this.state.invisible ? '4 new messages' : 'No unread messages'}
            invisible={this.state.invisible}
          >
            <Mail />
          </Badge>
        </Grid>
        <Grid item md={4}>
          <FormGroup row>
            <FormControlLabel
              control={
                <Switch
                  color="primary"
                  checked={!this.state.invisible}
                  onChange={this.handleBadgeVisibility}
                />
              }
              label="Show Badge"
            />
          </FormGroup>
        </Grid>
      </Grid>
    );
  }
}