React

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
isReadbooleanfalseAdds styling to the badge to indicate it has been read
childrenReact.ReactNode''content rendered inside the Badge
classNamestring''additional classes added to the Badge

CSS Variables

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