Badge

Overview Style Guidelines Code Demos Accessibility

Overview

A badge is used to annotate other information like a label or an object name.

  • neutral - Indicates generic information or a message with no severity.
  • danger - Indicates a danger state, like an error that is blocking a user from completing a task.
  • warning - Indicates a warning state, like a non-blocking error that might need to be fixed.
  • caution - Indicates an action or notice which should immediately draw the attention
  • info - Indicates helpful information or a message with very little to no severity.
  • success - Indicates a success state, like if a process was completed without errors.
Two badges; from left to right, one badge has a dark gray background with a white counter number and the other badge has a purple background with a white counter number.

Status

What do these mean?
Figma library:
Ready
RH Elements:
Ready
RH Shared Libs:
Ready

Sample element

1 99 11 100 6 2

When to use

  • When you need to reflect counts like number of objects, events, or unread items
Property Status Meaning
Figma library Ready Component is available in the Figma library
RH Elements Ready Component is available in the RH Elements repo
RH Shared Libs Ready Component is available in the RH Shared Libs repo