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)

Copied to clipboard

Badge (unread)

Copied to clipboard

Props

Badge props

The Badge component accepts the following props.

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