Badge

Status

Component checklist

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.

File Links