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

Simple label

Copied to clipboard

Props

Label Props

The Label component accepts the following props.

NameTypeRequiredDefaultDescription
className''
isCompactfalse

CSS Variables

--pf-c-label--BackgroundColorc_label_BackgroundColor#06c
--pf-c-label--BorderRadiusc_label_BorderRadius3px
--pf-c-label--Colorc_label_Color#fff
--pf-c-label--FontSizec_label_FontSize0.75rem
--pf-c-label--PaddingBottomc_label_PaddingBottom0.25rem
--pf-c-label--PaddingLeftc_label_PaddingLeft0.5rem
--pf-c-label--PaddingRightc_label_PaddingRight0.5rem
--pf-c-label--PaddingTopc_label_PaddingTop0.25rem
--pf-c-label--m-compact--FontSizec_label_m_compact_FontSize0.75rem