PF Next

Label Component


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



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.


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.