Badge
Importing
Add rh-badge to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-badge/rh-badge.js';
</script>To learn more about installing RHDS elements on your site using an import map read our getting started docs.
Usage
<rh-badge number="7">7</rh-badge>
<rh-badge number="24">24</rh-badge>
<rh-badge number="240">240</rh-badge>
<rh-badge threshold="900" number="999">999</rh-badge>
<script type="module">
import '@rhds/elements/rh-badge/rh-badge.js';
</script>rh-badge
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.
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
state |
state |
Denotes the state-of-affairs this badge represents |
|
|
number |
number |
Sets a numeric value for a badge. You can pair it with |
|
|
threshold |
threshold |
Sets a threshold for the numeric value and adds |
|
|
| Token | Copy |
|---|---|
--rh-border-radius-pill
|
|
--rh-color-status-caution
|
|
--rh-color-status-danger
|
|
--rh-color-status-info
|
|
--rh-color-status-neutral
|
|
--rh-color-status-success
|
|
--rh-color-status-warning
|
|
--rh-color-text-primary-on-dark
|
|
--rh-color-text-primary-on-light
|
|
--rh-font-size-body-text-xs
|
|
--rh-length-lg
|
|
--rh-line-height-body-text
|
|
--rh-space-md
|
|
