Badge

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Installation
  2. Usage
  1. Installation
  2. Usage

Installation

We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.1/elements/",
  }
}
</script>
Copy to Clipboard Wrap lines NPM 
npm install @rhds/elements
Copy to Clipboard Wrap lines JSPM 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-badge/rh-badge.js": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/rh-badge/rh-badge.js"
  },
  "scopes": {
    "https://ga.jspm.io/": {
      "@floating-ui/core": "https://ga.jspm.io/npm:@floating-ui/core@1.6.9/dist/floating-ui.core.mjs",
      "@floating-ui/dom": "https://ga.jspm.io/npm:@floating-ui/dom@1.6.13/dist/floating-ui.dom.mjs",
      "@floating-ui/utils": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.9/dist/floating-ui.utils.mjs",
      "@floating-ui/utils/dom": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.9/dist/floating-ui.utils.dom.mjs",
      "@lit/context": "https://ga.jspm.io/npm:@lit/context@1.1.3/development/index.js",
      "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
      "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/decorators/",
      "@patternfly/pfe-core": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/",
      "@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@rhds/elements/lib/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/lib/",
      "@rhds/elements/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/elements/",
      "@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
      "@rhds/icons/ui/": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/ui/",
      "@rhds/tokens/css/": "https://ga.jspm.io/npm:@rhds/tokens@2.1.1/css/",
      "@rhds/tokens/media.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.1/js/media.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.1/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.1/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.1/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.1/development/",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.1/",
      "prism-esm": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/prism.js",
      "prism-esm/components/": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/components/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.8.1/tslib.es6.mjs"
    }
  }
}
</script>
Copy to Clipboard Wrap lines

Add it to your page with this import statement

<script type="module">
  import '@rhds/elements/rh-badge/rh-badge.js';
</script>
Copy to Clipboard Wrap lines

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>
Copy to Clipboard Wrap lines

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 attention - `info` - 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.

Slots 0
None
Attributes 3
Attribute DOM Property Description Type Default
state state

Denotes the state-of-affairs this badge represents

 
| 'danger' | 'warning' | 'caution' | 'neutral' | 'success' | 'moderate' // deprecated | 'important' // deprecated | 'critical' // deprecated | 'info'
 
'neutral'
number number

Sets a numeric value for a badge.

You can pair it with threshold attribute to add a + sign if the number exceeds the threshold value.

 
number | undefined
 
unknown
threshold threshold

Sets a threshold for the numeric value and adds + sign if the numeric value exceeds the threshold value.

 
number | undefined
 
unknown
Methods 0
None
Events 0
None
CSS Shadow Parts 0
None
CSS Custom Properties 0
None
Design Tokens 13
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
Edit this page on GitHub