PatternFly Elements

Badge

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

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
DOM Property
number
Type
number | undefined
Default
unknown
threshold
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-2023 Red Hat, Inc. Deploys by Netlify