Badge

A small, styled label that is used to present metadata, status or properties inside or close to other components.

Status

Component checklist

Component (RN)

React Native Component Status

Published

Figma (RN)

Figma Component Status

Published

Code (Web)

HTML/CSS Code

Published

Figma (Web)

Figma Component Status

Published

Key Points

  • Badges are nested inside other components, such as lists or cards
  • Variants have specific use cases
  • The overall width adjusts with the size of the text
  • Badge labels should be concise, ideally single words
  • There are key anatomical differences between web and React Native components
  • When displayed in a stack, badges should use the gap of space-1 or 8px
  • Web component badges can appear on default and inverted surfaces
  • React Native component badges only appear on the default surface but have style, icon and size variants

Use a badge to display concise, helpful information about status, quantity, or attribute. Badges are static elements — they are not interactive and do not perform actions.