@melio-ui/badge v0.0.3

Badge

기본

<Badge.Root>
  <Badge.Content>{2}</Badge.Content>
  <UserIcon />
</Badge.Root>

Max

<Badge.Root max={99}>
  <Badge.Content>{100}</Badge.Content>
  <UserIcon />
</Badge.Root>

Size

<Badge.Root>
  <Badge.Content
    style={{
      minWidth: 20,
      height: 20,
      fontSize: 'calc(20px - 3px)',
      borderRadius: 'calc(20px / 2)',
      lineHeight: '20px',
    }}
  >
    large
  </Badge.Content>
  <UserIcon />
</Badge.Root>

Color

<Badge.Root>
  <Badge.Content style={{ backgroundColor: '#ffff00', color: 'black' }}>#ffff00</Badge.Content>
  <UserIcon />
</Badge.Root>

Placement

<Badge.Root placement="top-left">
  <Badge.Content>top-left</Badge.Content>
  <UserIcon />
</Badge.Root>

BadgeOnly

<Badge.Root>
  <Badge.Content />
</Badge.Root>