Badge

Variants

    <Flex gap="xs">
      <Badge variant="neutral">Neutral</Badge>
      <Badge variant="danger">Danger</Badge>
      <Badge variant="dangerSubtle">Danger Subtle</Badge>
      <Badge variant="info">Info</Badge>
      <Badge variant="infoSubtle">Info Subtle</Badge>
      <Badge variant="success">Success</Badge>
      <Badge variant="successSubtle">Success Subtle</Badge>
      <Badge variant="warning">Warning</Badge>
      <Badge variant="warningSubtle">Warning Subtle</Badge>
    </Flex>
  

Colors

    <Arrange gap="s">
      <Badge backgroundColor="shade12" color="shade2">
        Badge
      </Badge>
      <Badge color="blue" borderColor="blue">
        Badge
      </Badge>
      <Badge backgroundColor="fade1">
        Badge
      </Badge>
    </Arrange>
  

Props

Name

Type

Default

children

node

color

oneOfType

Object.keys(vars.colors)

string

backgroundColor

oneOfType

Object.keys(vars.colors)

string

borderColor

oneOfType

Object.keys(vars.colors)

string