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

Badge (read)

724240999+
Copied to clipboard

Badge (unread)

724240999+
Copied to clipboard

Props

Badge Props

The Badge component accepts the following props.

NameTypeRequiredDefaultDescription
isReadboolfalseAdds styling to the badge to indicate it has been read
childrennode''content rendered inside the Badge
classNamestring''additional classes added to the Badge
anyAdditional props are spread to the container <span>

CSS Variables

--pf-c-badge--BackgroundColorc_badge_BackgroundColor#06c
--pf-c-badge--BorderRadiusc_badge_BorderRadius30em
--pf-c-badge--Colorc_badge_Color#fff
--pf-c-badge--FontSizec_badge_FontSize0.75rem
--pf-c-badge--FontWeightc_badge_FontWeight600
--pf-c-badge--MinWidthc_badge_MinWidth2rem
--pf-c-badge--PaddingLeftc_badge_PaddingLeft0.5rem
--pf-c-badge--PaddingRightc_badge_PaddingRight0.5rem
--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