Skip to Content
Patternfly Logo

Label

Use a label when you want to highlight an element on a page to draw attention to it or make it more searchable.

ExamplesDocumentationCSS Variables

Examples

Basic

Default labelCompact label

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

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