Your bookmarks

Badge

Presents users with short, relevant information.

When you have a complex UI, users can sometimes struggle to find the information relevant to them. Use badges to call attention to details in a way that makes it easy to scan.

Badges should only present information, such as statuses, but not have any interactions. If you want badge-like components you can remove, consider using tags.

Component status

Figma
Released
Web (React)
Released
iOS (Swift)
Planned
Android (Kotlin)
Planned
Sketch
Released

Content structure

Label: works best when short; icon: supports the label.

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>