@patternfly/pfe-badge v1.12.3

PatternFly Elements Badge

The <pfe-badge> component provides a way to have small numerical descriptors for UI elements. To provide context to your badge, it is highly encouraged that you also include an aria-label attribute in your markup.

Read more about Badge in the PatternFly Elements Badge documentation

Installation

Load <pfe-badge> via CDN:

<script src="https://unpkg.com/@patternfly/pfe-badge?module"></script>

Or, if you are using NPM, install it

npm install @patternfly/pfe-badge

Then once installed, import it to your application:

import '@patternfly/pfe-badge';

Usage

<section>
  <pfe-badge aria-label="2 unread messages" number="2" threshold="10">2</pfe-badge>
</section>

Please refer to the specification for additional details.

With the threshold attribute:

<section>
  <pfe-badge number="1" threshold="10">1</pfe-badge>
  <pfe-badge number="17" threshold="20">17</pfe-badge>
  <pfe-badge number="900" threshold="100">900</pfe-badge>
</section>

With multiple state options for the state attribute:

<section>
  <pfe-badge state="info" number="10">10</pfe-badge>
  <pfe-badge state="success" number="20">20</pfe-badge>
  <pfe-badge state="moderate" number="30">30</pfe-badge>
  <pfe-badge state="important" number="40">40</pfe-badge>
  <pfe-badge state="critical" number="50">50</pfe-badge>
  <pfe-badge state="default" number="60">60</pfe-badge>
</section>