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
- 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
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.