Skip to content
Versions v3 v2 v1

Badge

A badge is used to annotate other information like a label or an object name.

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.

Overview

17 900 10

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

2
View HTML Source
<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.

20
View HTML Source
<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.

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

Slots

None

Attributes

state

Denotes the state-of-affairs this badge represents Options include read and unread

DOM Property
state
Type
'unread' | 'read' | 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

None

Events

None

CSS Custom Properties

CSS Property Description Default
--pf-c-badge--BorderRadius 180em
--pf-c-badge--MinWidth 2rem
--pf-c-badge--PaddingLeft 0.5rem
--pf-c-badge--PaddingRight 0.5rem
--pf-c-badge--FontSize 0.85em
--pf-c-badge--LineHeight 1.5
--pf-c-badge--FontWeight 700
--pf-c-badge--Color #151515
--pf-c-badge--BackgroundColor #f0f0f0
--pf-c-badge--m-read--Color #151515
--pf-c-badge--m-read--BackgroundColor #f0f0f0
--pf-c-badge--m-unread--Color #fff
--pf-c-badge--m-unread--BackgroundColor #06c

CSS Shadow Parts

None

© 2018-2024 Red Hat, Inc. Deploys by Netlify