React

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
className''null
isCompactfalsenull

CSS Variables

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