Skip to Content
Patternfly Logo

Label

Use a label when you want to highlight an element on a page to draw attention to it or make it more searchable.

ExamplesPropsCSS Variables

Examples

Basic

Default Label Compact Label

Props

Label properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeYesContent rendered inside the label.
classNamestringNo''Additional classes added to the label.
isCompactbooleanNofalseFlag to show if the label is compact.

CSS Variables

.pf-c-label--pf-c-label--PaddingTopc_label_PaddingTop
0.25rem
.pf-c-label--pf-c-label--PaddingRightc_label_PaddingRight
0.5rem
.pf-c-label--pf-c-label--PaddingBottomc_label_PaddingBottom
0.25rem
.pf-c-label--pf-c-label--PaddingLeftc_label_PaddingLeft
0.5rem
.pf-c-label--pf-c-label--BorderRadiusc_label_BorderRadius
3px
.pf-c-label--pf-c-label--BackgroundColorc_label_BackgroundColor
#06c
.pf-c-label--pf-c-label--Colorc_label_Color
#fff
.pf-c-label--pf-c-label--FontSizec_label_FontSize
0.875rem
.pf-c-label--pf-c-label--m-compact--FontSizec_label_m_compact_FontSize
0.75rem
.pf-c-label.pf-m-compact--pf-c-label--FontSizec_label_FontSize
0.75rem