Badge

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

• info: Indicates informative or low impact
• success: Indicates stability or completion
• moderate: Indicates caution
• important: Indicates an error
• critical: Indicates danger or something critical

1 99 100 11 6 2

View a live version of this component and see how it can be customized.

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

Full screen demo

• When you need to reflect counts like number of objects, events, or unread items

Status checklist