G
Tokens
TypographySpacingColorRadiusShadowMotion
Foundational
FieldMenuTextbox

Badge

Variant


    <Arrange gap="s">
      <Badge variant="neutral">Neutral</Badge>
      <Badge variant="danger">Danger</Badge>
      <Badge variant="success">Success</Badge>
      <Badge variant="warning">Warning</Badge>
    </Arrange>
  

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