Badge
A badge provides a small count or status annotation for labels, navigation items, or object names. Use a badge when you need to display a numeric count or short status indicator alongside other content.
Authors SHOULD slot visually-hidden text for screen readers when the
number alone lacks context, e.g. <pf-v6-badge>3 <span class="sr-only">unread messages</span></pf-v6-badge>.
Overview
A badge is used to annotate other information like a label or an object name.
Installation
npm install @patternfly/elementsUsage
Read and unread
View HTML Source
<pf-v6-badge state="unread">7</pf-v6-badge>
<pf-v6-badge state="read">24</pf-v6-badge>
Disabled
View HTML Source
<pf-v6-badge state="read" disabled>10</pf-v6-badge>
Slots
- Default Slot
-
Badge content, typically a number. Include visually-hidden text for screen reader context.
Attributes
state-
Denotes the state-of-affairs this badge represents.
- DOM Property
state- Type
-
'unread' | 'read' - Default
-
unknown
disabled-
Disables the badge
- DOM Property
disabled- Type
-
boolean - Default
-
false
Methods
None
Events
None
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--pf-v6-c-badge--MinWidth |
Minimum badge width |
var(--pf-t--global--spacer--xl, 2rem)
|
--pf-v6-c-badge--PaddingInlineStart |
Inline start padding |
var(--pf-t--global--spacer--sm, 0.5rem)
|
--pf-v6-c-badge--PaddingInlineEnd |
Inline end padding |
var(--pf-t--global--spacer--sm, 0.5rem)
|
--pf-v6-c-badge--FontSize |
Badge text font size |
var(--pf-t--global--font--size--body--sm, 0.75rem)
|
--pf-v6-c-badge--FontWeight |
Badge text font weight |
var(--pf-t--global--font--weight--body--bold, 700)
|
--pf-v6-c-badge--Color |
Badge text color |
var(--pf-v6-c-badge--m-disabled--Color,
var(--pf-t--global--text--color--on-disabled, #6a6e73))
|
--pf-v6-c-badge--BackgroundColor |
Badge background color |
var(--pf-t--global--color--nonstatus--gray--default, #f0f0f0)
|
--pf-v6-c-badge--BorderRadius |
Badge border radius |
var(--pf-t--global--border--radius--pill, 180em)
|
--pf-v6-c-badge--BorderWidth |
Badge border width |
var(--pf-t--global--border--width--regular, 1px)
|
--pf-v6-c-badge--BorderColor |
Badge border color |
transparent
|
--pf-v6-c-badge--m-read--Color |
Text color in read state |
var(--pf-t--global--text--color--nonstatus--on-gray--default, #151515)
|
--pf-v6-c-badge--m-read--BackgroundColor |
Background in read state |
var(--pf-t--global--color--nonstatus--gray--default, #f0f0f0)
|
--pf-v6-c-badge--m-read--BorderColor |
Border color in read state |
var(--pf-t--global--border--color--high-contrast, #151515)
|
--pf-v6-c-badge--m-unread--Color |
Text color in unread state |
var(--pf-t--global--text--color--on-brand--default, #fff)
|
--pf-v6-c-badge--m-unread--BackgroundColor |
Background in unread state |
var(--pf-t--global--color--brand--default, #06c)
|
--pf-v6-c-badge--m-disabled--Color |
Text color when disabled |
var(--pf-t--global--text--color--on-disabled, #6a6e73)
|
--pf-v6-c-badge--m-disabled--BackgroundColor |
Background when disabled |
var(--pf-t--global--background--color--disabled--default, #d2d2d2)
|
--pf-v6-c-badge--m-disabled--BorderColor |
Border color when disabled |
var(--pf-t--global--border--color--disabled, #d2d2d2)
|
--pf-t--global--spacer--xl |
Ensures badge is wide enough for single-digit content |
2rem
|
--pf-t--global--spacer--sm |
Horizontal padding for badge content Horizontal padding for badge content |
0.5rem
|
--pf-t--global--font--size--body--sm |
Small body text size for compact display |
0.75rem
|
--pf-t--global--font--weight--body--bold |
Bold weight for badge number emphasis |
700
|
--pf-t--global--border--radius--pill |
Pill shape for badge container |
180em
|
--pf-t--global--border--width--regular |
1px
|
|
--pf-t--global--text--color--nonstatus--on-gray--default |
#151515
|
|
--pf-t--global--color--nonstatus--gray--default |
#f0f0f0
|
|
--pf-t--global--border--color--high-contrast |
#151515
|
|
--pf-t--global--text--color--on-brand--default |
#fff
|
|
--pf-t--global--color--brand--default |
#06c
|
|
--pf-t--global--text--color--on-disabled |
#6a6e73
|
|
--pf-t--global--background--color--disabled--default |
#d2d2d2
|
|
--pf-t--global--border--color--disabled |
#d2d2d2
|
CSS Shadow Parts
None
