Badge

Installation

We recommend loading elements via a CDN such as JSPM and using an import map to manage your dependencies.

For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

If you are using node and NPM, you can install this component using npm:

npm install @patternfly/elements

Then import this component into your project by using a bare module specifier:

import '@patternfly/elements/pf-badge/pf-badge.js';

Please Note You should either load elements via a CDN or install them locally through NPM. Do not do both.

Installation

npm install @patternfly/elements

Usage

To provide context to your badge, it is highly encouraged that you also include an aria-label attribute in your markup.

Default

<pf-badge aria-label="2 unread messages" number="2">2</pf-badge>

With a threshold

This adds a "+" next to the number once the threshold value has been passed.

<pf-badge aria-label="2 unread messages" number="20" threshold="10">20</pf-badge>

With a state

This adds a background color to the badge based on the state.

<pf-badge state="read" number="10">10</pf-badge>
<pf-badge state="unread" number="20">20</pf-badge>