Patternfly Logo

Examples

Read

7 24 240 999+

Unread

7 24 240 999+

Props

Badge properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNo''content rendered inside the Badge
classNamestringNo''additional classes added to the Badge
isReadbooleanNofalseAdds styling to the badge to indicate it has been read

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