Badge

A count or a dot anchored over another element. The badge is decoration: it is hidden from assistive technology, and badgeLabel is what is heard instead - read with its child and, over one element,...

Source

A count or a dot anchored over another element. The badge is decoration: it is hidden from assistive technology, and badgeLabel is what is heard instead - read with its child and, over one element, as that element's description. A count past max shows as max+, and a count of zero - or nothing - shows no badge, unless shouldShowZero.

import { Badge } from '@soroush.tech/design-system/Badge'

;<Badge badgeContent={4} badgeLabel="4 unread">
  <Button>Inbox</Button>
</Badge>

Examples

Default

const args: Partial<BadgeProps> = { badgeContent: 4 }

<Badge {...args}>{inbox}</Badge>

Dot

const args: Partial<BadgeProps> = { variant: 'dot' }

<Badge {...args}>{inbox}</Badge>

Colors

const args: Partial<BadgeProps> = { badgeContent: 4 }

<Flex flexDirection="row" gap={3} alignItems="center">
  {buttonColorTokens.map((color) => (
    <Badge key={color} {...args} color={color}>
      {inbox}
    </Badge>
  ))}
</Flex>

Corners

const args: Partial<BadgeProps> = { badgeContent: 4 }

<Flex flexDirection="row" gap={3} alignItems="center">
  {(['top', 'bottom'] as const).flatMap((vertical) =>
    (['start', 'end'] as const).map((horizontal) => (
      <Badge
        key={`${vertical}-${horizontal}`}
        {...args}
        anchorOrigin={{ vertical, horizontal }}
      >
        {inbox}
      </Badge>
    ))
  )}
</Flex>

On ACircle

const args: Partial<BadgeProps> = { badgeContent: 4 }

<Badge {...args} overlap="circular">
  <Avatar>M</Avatar>
</Badge>

Counts

const args: Partial<BadgeProps> = { badgeContent: 4 }

<Flex flexDirection="row" gap={3} alignItems="center">
  {[0, 7, 99, 100, 1000].map((count) => (
    <Badge key={count} {...args} badgeContent={count} shouldShowZero>
      {inbox}
    </Badge>
  ))}
</Flex>

With ALabel

4 unread

const args: Partial<BadgeProps> = { badgeContent: 4, badgeLabel: '4 unread' }

<Badge {...args}>
  <Button variant="outlined" size="sm">
    Inbox
  </Button>
</Badge>