HTML

Label

ExamplesDocumentationCSS Variables

Examples

Basic

Default labelCompact label

Documentation

Overiew

Labels can be used in a variety of components and can adjust in font size to match that of the component it lives in. For example, labels can be used in tables. Specifically, the compact table has a modifier that adjusts its font size, so when using a label in this table, it's important to also add its respective modifier.

Usage

ClassApplied toOutcome
.pf-c-label<span>Iniates a label.
.pf-m-compact.pf-c-labelModifies label for a compact table.

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