G
Tokens
TypographySpacingColorRadiusShadowMotion
Patterns
CardsModals

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>
  

Color


    <Arrange gap="s">
      <Badge backgroundColor="shade12" color="shade2">
        Badge
      </Badge>
      <Badge color="blue7" borderColor="blue3">
        Badge
      </Badge>
      <Badge backgroundColor="fade2">
        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