Badge
A badge is used to annotate other information like a label or an object name.
Overview
Installation
npm install @patternfly/elementsUsage
To provide context to your badge, it is highly encouraged that you also include an aria-label attribute in your markup.
Default
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.
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.
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
