Your bookmarks

Badge

We use badges when we need to inform our users about relevant information, e.g., booking status. The badge is not clickable.

Component status

Sketch
Released
Figma
Planned
React
Released
React Native
Released

Content structure

Badge types

<Stack direction="column">
  <Stack flex>
    <Badge>Neutral</Badge>
    <Badge type="info">Info</Badge>
    <Badge type="success">Success</Badge>
    <Badge type="warning">Warning</Badge>
    <Badge type="critical">Critical</Badge>
  </Stack>
  <Stack flex>
    <Badge type="dark">Dark</Badge>
    <Badge type="infoInverted">Info Inverted</Badge>
    <Badge type="successInverted">Success Inverted</Badge>
    <Badge type="warningInverted">Warning Inverted</Badge>
    <Badge type="criticalInverted">Critical Inverted</Badge>
  </Stack>
</Stack>