Skip to Content
Patternfly Logo

Badge

A badge is used to annotate other information like a label or an object name. Badges are typically used to reflect a count, e.g. number of object, number of events, number of unread, etc.

ExamplesPropsCSS Variables

Examples

Read

7 24 240 999+

Unread

7 24 240 999+

Props

Badge properties
NameTypeRequiredDefaultDescription
isReadbooleanNofalseAdds styling to the badge to indicate it has been read
childrenReact.ReactNodeNo''content rendered inside the Badge
classNamestringNo''additional classes added to the Badge

CSS Variables

.pf-c-badge--pf-c-badge--BorderRadiusc_badge_BorderRadius
30em
.pf-c-badge--pf-c-badge--FontSizec_badge_FontSize
0.75rem
.pf-c-badge--pf-c-badge--FontWeightc_badge_FontWeight
600
.pf-c-badge--pf-c-badge--PaddingRightc_badge_PaddingRight
0.5rem
.pf-c-badge--pf-c-badge--PaddingLeftc_badge_PaddingLeft
0.5rem
.pf-c-badge--pf-c-badge--Colorc_badge_Color
#151515
.pf-c-badge--pf-c-badge--MinWidthc_badge_MinWidth
2rem
.pf-c-badge--pf-c-badge--m-read--BackgroundColorc_badge_m_read_BackgroundColor
#ededed
.pf-c-badge--pf-c-badge--m-read--Colorc_badge_m_read_Color
#151515
.pf-c-badge--pf-c-badge--m-unread--BackgroundColorc_badge_m_unread_BackgroundColor
#06c
.pf-c-badge--pf-c-badge--m-unread--Colorc_badge_m_unread_Color
#fff
.pf-c-badge.pf-m-read--pf-c-badge--Colorc_badge_Color
#151515
.pf-c-badge.pf-m-read--pf-c-badge--BackgroundColorc_badge_BackgroundColor
#ededed
.pf-c-badge.pf-m-unread--pf-c-badge--Colorc_badge_Color
#fff
.pf-c-badge.pf-m-unread--pf-c-badge--BackgroundColorc_badge_BackgroundColor
#06c