Badge

Overview Style Guidelines Code Demos Accessibility
  1. Usage
  2. rh-badge
  1. Usage
  2. rh-badge

Installation

Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="module">
  import '@rhds/elements/rh-badge/rh-badge.js';
</script>
Import Map Example 
<script type="importmap">
  {
    "imports": {
      "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.0.1/elements/",
    }
  }
</script>
 NPM 
npm install @rhds/elements
<script type="module">
  import '@rhds/elements/rh-badge/rh-badge.js';
</script>
 JSPM 
<script type="module">
  import '@rhds/elements/rh-badge/rh-badge.js';
</script>
Import Map Example 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-badge/rh-badge.js": "./elements/rh-badge/rh-badge.js"
  },
  "scopes": {
    "./": {
      "@patternfly/pfe-core/controllers/style-controller.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/controllers/style-controller.js",
      "@rhds/elements/lib/context/color/consumer.js": "./lib/context/color/consumer.js",
      "@rhds/tokens/css/color-context-consumer.css.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0-next.15/css/color-context-consumer.css.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit-html/directives/class-map.js": "https://ga.jspm.io/npm:lit-html@3.2.0/development/directives/class-map.js",
      "lit/decorators/": "https://ga.jspm.io/npm:lit@3.2.0/decorators/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    },
    "https://ga.jspm.io/": {
      "@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/",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.0/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.0/development/lit-html.js",
      "lit-html/is-server.js": "https://ga.jspm.io/npm:lit-html@3.2.0/development/is-server.js"
    }
  }
}
</script>

Usage 

<rh-badge number="1" aria-label="1 new message">1</rh-badge>

rh-badge

Slots 0

None

 Attributes 3
Attribute DOM Property Description Type Default
state state

Denotes the state-of-affairs this badge represents

 
| 'info'
    | 'success'
    | 'moderate'
    | 'important'
    | 'critical' | undefined

unknown
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 14
Token Copy
--rh-border-radius-pill
--rh-color-status-caution
--rh-color-status-danger
--rh-color-status-note
--rh-color-status-success
--rh-color-status-warning
--rh-color-surface-darker
--rh-color-surface-lighter
--rh-color-text-primary
--rh-color-text-primary-on-dark
--rh-color-text-primary-on-light
--rh-font-size-body-text-xs
--rh-line-height-body-text
--rh-space-md
Edit this page on GitHub