Badge

Overview Style Guidelines Code Accessibility

Overview

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 component

1 99 100 11 6 2

Demos

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

<link rel="stylesheet" href="demo.css">
<script type="module" src="rh-badge.js"></script>

<dl>
  <dt>State: Default</dt>
  <dd>
    <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>
  </dd>

  <dt>State: Info</dt>
  <dd>
    <rh-badge number="7" state="info">7</rh-badge>
    <rh-badge number="24" state="info">24</rh-badge>
    <rh-badge number="240" state="info">240</rh-badge>
    <rh-badge threshold="900" number="999" state="info">999</rh-badge>
  </dd>

  <dt>State: Success</dt>
  <dd>
    <rh-badge number="7" state="success">7</rh-badge>
    <rh-badge number="24" state="success">24</rh-badge>
    <rh-badge number="240" state="success">240</rh-badge>
    <rh-badge threshold="900" number="999" state="success">999</rh-badge>
  </dd>

  <dt>State: Moderate</dt>
  <dd>
    <rh-badge number="7" state="moderate">7</rh-badge>
    <rh-badge number="24" state="moderate">24</rh-badge>
    <rh-badge number="240" state="moderate">240</rh-badge>
    <rh-badge threshold="900" number="999" state="moderate">999</rh-badge>
  </dd>

  <dt>State: Important</dt>
  <dd>
    <rh-badge number="7" state="important">7</rh-badge>
    <rh-badge number="24" state="important">24</rh-badge>
    <rh-badge number="240" state="important">240</rh-badge>
    <rh-badge threshold="900" number="999" state="important">999</rh-badge>
  </dd>

  <dt>State: Critical</dt>
  <dd>
    <rh-badge number="7" state="critical">7</rh-badge>
    <rh-badge number="24" state="critical">24</rh-badge>
    <rh-badge number="240" state="critical">240</rh-badge>
    <rh-badge threshold="900" number="999" state="critical">999</rh-badge>
  </dd>

  <dt>Threshold exceeded</dt>
  <dd>
    <rh-badge number="900" threshold="100">900</rh-badge> (Threshold = 100)
    <p>Should add '+' sign if the value exceeds the threshold</p>
  </dd>

  <dt>Threshold not exceeded</dt>
  <dd>
    <rh-badge number="900" threshold="1000">900</rh-badge>
    (Threshold = 10000)
    <p>Shouldn't add a '+' sign if the value doesn't exceed the threshold</p>
  </dd>
</dl>

 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-2023 Red Hat, Inc. Deploys by Netlify
Scroll back to the top