Badge

Overview

The badge component provides a way to have small numerical descriptors for UI elements.

17 900 10 20 30 40 50

Installation

npm install @patternfly/pfe-badge

Usage

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

Default

2

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

With a threshold

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

20

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

With a state

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

10 20 30 40 50

<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>

Slots

Attributes

state

Denotes the state-of-affairs this badge represents Options include moderate, important, critical, success, info.

DOM Property

state

Type

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

Default

unknown

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.

DOM Property

number

Type

number | undefined

Default

unknown

threshold

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

DOM Property

threshold

Type

number | undefined

Default

unknown

Methods

Events

CSS Custom Properties

CSS Shadow Parts

None