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
Two badges; from left to right, one badge has a light gray background with a dark gray counter number and the other badge has a blue background with a white counter number

Sample element

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';
View the <rh-badge> demo in a new tab

When to use

  • When you need to reflect counts like number of objects, events, or unread items
© 2021-2024 Red Hat, Inc. Deploys by Netlify