HTML

Label

ExamplesDocumentationCSS Variables

Examples

Label component

Default label Compact label
Copied to clipboard

Documentation

Overview

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

Class Applied to Outcome
.pf-c-label <span> Iniates a label.
.pf-m-compact .pf-c-label Modifies label for a compact table.

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