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

Danger alert:Warning

Please don't use this component, it's only an example of what an experimental component could be and likely going away in our next release. Use our actual Badge instead.

Badge

Copied to clipboard

Props

Badge Props

The Badge component accepts the following props.

NameTypeRequiredDefaultDescription
testThingbooleanAdds styling to the badge to indicate it has been read
isReadfalse
className''
children''

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_FontWeight700
--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