<SpacedGroup xs={24}>
    <Badge count={0}>
      <AttachmentsIcon size={32} />
    
    <Badge count={0} showZero>
      <AttachmentsIcon size={32} />
    </Badge>
    <Badge count={50} maxCount={51}>
      <AlertIcon size={32} />
    </Badge>
    <Badge count={10000} maxCount={99}>
      <MailboxIcon size={32} />
    </Badge>
  </SpacedGroup>
</Playground>

<SpacedGroup xs={32}>
    <SpacedGroup direction="vertical" center>
      <Badge count={12} />
      <span>Count
    </SpacedGroup>
    <SpacedGroup direction="vertical" center>
      <Badge count={12} maxCount={10} />
      <span>Max Count</span>
    </SpacedGroup>
    <SpacedGroup direction="vertical" center>
      <Badge count={100} maxCount={1000} />
      <span>Ignore Max Count</span>
    </SpacedGroup>
    <SpacedGroup direction="vertical" center>
      <Badge count={0} showZero />
      <span>Show Zero</span>
    </SpacedGroup>
  </SpacedGroup>
</Playground>

<SpacedGroup xs={32}>
    <SpacedGroup direction="vertical" center>
      <Badge count={12} backgroundColor={palette.fern} />
      <span>Fern
    </SpacedGroup>
    <SpacedGroup direction="vertical" center>
      <Badge
        count={12}
        maxCount={10}
        backgroundColor={palette.paper}
        color={palette.obsidian}
        bordered
      />
      <span>Paper</span>
    </SpacedGroup>
    <SpacedGroup direction="vertical" center>
      <Badge
        count={100}
        maxCount={1000}
        backgroundColor={palette.denim}
        color={palette.paper}
      />
      <span>Denim</span>
    </SpacedGroup>
    <SpacedGroup direction="vertical" center>
      <Badge count={0} showZero />
      <span>Sunset (Default)</span>
    </SpacedGroup>
  </SpacedGroup>
</Playground>