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.
Edit element properties
import '@rhds/elements/rh-badge/rh-badge.js';<rh-badge number="7">7</rh-badge>Denotes the state-of-affairs this badge represents Note: 'moderate','important', and 'critical' will also work, but are deprecated
Sets a numeric value for a badge.
- You can pair it with
thresholdattribute to add a+sign if the number exceeds the threshold value.
Sets a threshold for the numeric value and adds + sign if
the numeric value exceeds the threshold value.
Status
What do these mean?
- Figma library:
-
Ready - RH Elements:
-
Ready - RH Shared Libs:
-
Ready
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.
