Badge
On this page
On this page
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 attentioninfo- 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.
Status
What do these mean?
- Figma library:
-
Ready - RH Elements:
-
Ready - RH Shared Libs:
-
Ready
Sample element
When to use
- When you need to reflect counts like number of objects, events, or unread items
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 checklist
| Property | Status | Meaning |
|---|---|---|
| Figma library |
|
Component is available in the Figma library |
| RH Elements |
|
Component is available in the RH Elements repo |
| RH Shared Libs |
|
Component is available in the RH Shared Libs repo |
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
