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

Default Label Compact Label
Copied to clipboard

Props

Label Props

The Label component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the label.
childrennodeContent rendered inside the label.
isCompactboolfalseFlag to show if the label is compact.
anyAdditional props are spread to the container <span>

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