PF Next

Label Component

Preview

Default Label Compact Label
<span class="pf-c-label">
    Default Label
</span>
<span class="pf-c-label pf-m-compact">
    Compact Label
</span>

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-hover .pf-c-label Modifies label for a hover state.
.pf-m-compact .pf-c-label Modifies label for a compact table.