Badge

Using Badges

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.

The following styles can be used in any components or layouts as required. Their styles are used to provide supporting context for the text they contain.

Use badges to:

• Display status information or highlight attributes, such as "Active" or "New"
• Show counts or quantities, such as notification numbers
• Provide quick, scannable context within lists, cards, or tiles

Do not use badges when:

• The information requires user interaction — use a button or link instead
• The label needs more than two words — use body text instead
• The information is the primary content — badges should support other content, not replace it

Variants

• Default - This is the default badge that is used for aside information, such as a count or supplementary information.
• Primary - When you want to highlight a specific badge, there should only be one instance of a primary badge per collection
• Accent - Used to draw attention to key information; there should be only one instance per screen.
• Highlight - Like an accent, it draws attention to key information; there can be multiple instances per screen.
• Positive - Should be used to highlight a positive piece of information
• Negative - Should be used to highlight a negative piece of information

React Native Badges

React Native badges vary from web components

• They have subtle and solid styles
• They have small and medium size variants
• They include an optional icon

Use the size and style based on the context in which the badge appears. However, every collection of components should use the same size and style for consistency.

Select icons that relate to the label text. Users will associate the icon and label.