Skip to content
PatternFly logo

Badge

A badge is used to annotate other information like a label or an object name.

Examples

Read

7 24 240 999+

Unread

7 Unread Messages 24 Unread Messages 240 Unread Messages 999+ Unread Messages

Props

Badge

*required
NameTypeDefaultDescription
childrenReact.ReactNode''content rendered inside the Badge
classNamestring''additional classes added to the Badge
isReadbooleanfalseAdds styling to the badge to indicate it has been read
screenReaderTextstringText announced by screen readers to indicate the current content/status of the badge.

CSS variables

.pf-c-badge--pf-c-badge--BorderRadius
30em
.pf-c-badge--pf-c-badge--FontSize
0.75rem
.pf-c-badge--pf-c-badge--FontWeight
700
.pf-c-badge--pf-c-badge--PaddingRight
0.5rem
.pf-c-badge--pf-c-badge--PaddingLeft
0.5rem
.pf-c-badge--pf-c-badge--Color
#151515
.pf-c-badge--pf-c-badge--MinWidth
2rem
.pf-c-badge--pf-c-badge--m-read--BackgroundColor
#f0f0f0
.pf-c-badge--pf-c-badge--m-read--Color
#151515
.pf-c-badge--pf-c-badge--m-unread--BackgroundColor
#06c
.pf-c-badge--pf-c-badge--m-unread--Color
#fff
.pf-c-badge.pf-m-read--pf-c-badge--Color
#151515
.pf-c-badge.pf-m-read--pf-c-badge--BackgroundColor
#f0f0f0
.pf-c-badge.pf-m-unread--pf-c-badge--Color
#fff
.pf-c-badge.pf-m-unread--pf-c-badge--BackgroundColor
#06c

View source on GitHub