Skip to content
PatternFly.org Contribute on Github
PatternFly Elements
Versions v4 v3 v2 v1

Label

The label component allows users to add specific element captions for user clarity and convenience.

Installation

We recommend loading elements via a CDN such as JSPM and using an import map to manage your dependencies.

For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

If you are using node and NPM, you can install this component using npm:

npm install @patternfly/elements

Then import this component into your project by using a bare module specifier:

import '@patternfly/elements/pf-label/pf-label.js';

Please Note You should either load elements via a CDN or install them locally through NPM. Do not do both.

Overview

Default

Installation

npm install @patternfly/elements

Usage

Default

Default
View HTML Source 
<pf-label>Default</pf-label>

With a color

Available colors are: grey (default), blue, green, orange, red, purple, cyan, gold

Blue Green Orange Red Purple Cyan Gold
View HTML Source 
<pf-label color="blue">Blue</pf-label>
<pf-label color="green">Green</pf-label>
<pf-label color="orange">Orange</pf-label>
<pf-label color="red">Red</pf-label>
<pf-label color="purple">Purple</pf-label>
<pf-label color="cyan">Cyan</pf-label>
<pf-label color="gold">Gold</pf-label>

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with a class.

Red Warning
View HTML Source 
<style>
  .visually-hidden-class {
    clip: rect(0 0 0 0); 
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap; 
    width: 1px;
  }
</style>
<pf-label color="red">
  Red <span class="visually-hidden-class">Warning</span>
</pf-label>

Outline variant

Swaps the color style for a outline styled variant

Blue Green Orange Red Purple Cyan Gold Default
View HTML Source 
<pf-label variant="outline" color="blue">Blue</pf-label>
<pf-label variant="outline" color="green">Green</pf-label>
<pf-label variant="outline" color="orange">Orange</pf-label>
<pf-label variant="outline" color="red">Red</pf-label>
<pf-label variant="outline" color="purple">Purple</pf-label>
<pf-label variant="outline" color="cyan">Cyan</pf-label>
<pf-label variant="outline" color="gold">Gold</pf-label>
<pf-label variant="outline">Default</pf-label>

With icon as an attribute

Adds a optional fixed size pf-icon to the label as a prefix

Globe
View HTML Source 
<pf-label color="blue" icon="globe">Globe</pf-label>

Read more about Icon in the PatternFly Elements Icon documentation

With user defined image using slot="icon"

Adds user defined SVG or pf-icon to the label.

Globe
View HTML Source 
<pf-label color="blue">Globe
  <svg slot="icon"
 viewBox="0 0 17 17"
 xmlns="http://www.w3.org/2000/svg"
 fill="currentColor"
 aria-hidden="true"
 role="img">
    <path d="M8.5,1A7.5,7.5,0,1,0,16,8.5,7.508,7.508,0,0,0,8.5,1Zm0,13.731a9.636,9.636,0,0,1-1.941-3.724H10.44A9.647,9.647,0,0,1,8.5,14.731ZM6.352,10.007A9.688,9.688,0,0,1,6.351,7h4.3a9.75,9.75,0,0,1,0,3.007ZM2,8.5A6.45,6.45,0,0,1,2.182,7H5.335a10.741,10.741,0,0,0,0,3.007H2.182A6.515,6.515,0,0,1,2,8.5ZM10.442,6H6.557A9.636,9.636,0,0,1,8.5,2.268,9.625,9.625,0,0,1,10.442,6Zm1.222,1h3.154a6.268,6.268,0,0,1,0,3.007H11.663A10.779,10.779,0,0,0,11.664,7ZM14.5,6H11.474A10.619,10.619,0,0,0,9.653,2.109,6.513,6.513,0,0,1,14.5,6ZM7.341,2.109A10.61,10.61,0,0,0,5.524,6H2.5A6.521,6.521,0,0,1,7.341,2.109ZM2.5,11.007H5.528a10.6,10.6,0,0,0,1.821,3.887A6.5,6.5,0,0,1,2.5,11.007Zm7.153,3.884a10.6,10.6,0,0,0,1.819-3.884H14.5A6.518,6.518,0,0,1,9.653,14.891Z"/>
  </svg>
</pf-label>
Globe
View HTML Source 
<pf-label color="blue">Globe
  <pf-icon slot="icon" icon="globe" size="sm"></pf-icon>
</pf-label>

Compact style

Creates a compact style label which can be combined with color, variant and icon

Globe Green Orange Red Purple Cyan Gold Default
View HTML Source 
<pf-label compact color="blue">Globe
  <svg slot="icon"
 xmlns="http://www.w3.org/2000/svg"
 viewBox="0 0 17 17"
 fill="currentColor"
 aria-hidden="true"
 role="img">
     <path d="M8.5,1A7.5,7.5,0,1,0,16,8.5,7.508,7.508,0,0,0,8.5,1Zm0,13.731a9.636,9.636,0,0,1-1.941-3.724H10.44A9.647,9.647,0,0,1,8.5,14.731ZM6.352,10.007A9.688,9.688,0,0,1,6.351,7h4.3a9.75,9.75,0,0,1,0,3.007ZM2,8.5A6.45,6.45,0,0,1,2.182,7H5.335a10.741,10.741,0,0,0,0,3.007H2.182A6.515,6.515,0,0,1,2,8.5ZM10.442,6H6.557A9.636,9.636,0,0,1,8.5,2.268,9.625,9.625,0,0,1,10.442,6Zm1.222,1h3.154a6.268,6.268,0,0,1,0,3.007H11.663A10.779,10.779,0,0,0,11.664,7ZM14.5,6H11.474A10.619,10.619,0,0,0,9.653,2.109,6.513,6.513,0,0,1,14.5,6ZM7.341,2.109A10.61,10.61,0,0,0,5.524,6H2.5A6.521,6.521,0,0,1,7.341,2.109ZM2.5,11.007H5.528a10.6,10.6,0,0,0,1.821,3.887A6.5,6.5,0,0,1,2.5,11.007Zm7.153,3.884a10.6,10.6,0,0,0,1.819-3.884H14.5A6.518,6.518,0,0,1,9.653,14.891Z"/>
 </svg>
</pf-label>
<pf-label compact color="green">Green</pf-label>
<pf-label compact variant="outline" color="orange">Orange</pf-label>
<pf-label compact color="red" icon="globe">Red</pf-label>
<pf-label compact variant="outline" color="purple">Purple</pf-label>
<pf-label compact color="cyan">Cyan</pf-label>
<pf-label compact variant="outline" color="gold">Gold <pf-icon slot="icon" icon="globe" size="sm"></pf-icon></pf-label>
<pf-label compact>Default</pf-label>

Slots

icon

Contains the labels's icon, e.g. web-icon-alert-success.

Default Slot

Must contain the text for the label.

Attributes

variant

Changes the style of the label.

  • Filled: Colored background with colored border.
  • Outline: White background with colored border.
DOM Property
variant
Type
| 'filled'
    | 'outline'
Default
'filled'
color

Changes the color of the label

DOM Property
color
Type
| 'blue'
    | 'cyan'
    | 'green'
    | 'orange'
    | 'purple'
    | 'red'
    | 'grey'
    | 'gold'
Default
'grey'
icon

Shorthand for the icon slot, the value is icon name

DOM Property
icon
Type
string | undefined
Default
unknown
compact

Flag indicating the label is compact

DOM Property
compact
Type
boolean
Default
false
truncated

Flag indicating the label text should be truncated

DOM Property
truncated
Type
boolean
Default
false
removable

Flag indicating the label is removable

DOM Property
removable
Type
boolean
Default
false
close-button-label

Text label for a removable label's close button

DOM Property
closeButtonLabel
Type
string | undefined
Default
unknown

Methods

None

Events

close

when a removable label's close button is clicked

Event Type: 
LabelCloseEvent

CSS Custom Properties

CSS Property Description Default
--pf-c-label--FontSize 0.875em
--pf-c-label--PaddingTop 0.25rem
--pf-c-label--PaddingRight 0.5rem
--pf-c-label--PaddingBottom 0.25rem
--pf-c-label--PaddingLeft 0.5rem
--pf-c-label--Color #151515
--pf-c-label--BackgroundColor #f5f5f5
--pf-c-label--BorderRadius 30em
--pf-c-label__content--MaxWidth 100
--pf-c-label__content--Color #151515
--pf-c-label__content--before--BorderWidth 1px
--pf-c-label__content--before--BorderColor #d2d2d2
--pf-c-label--m-outline__content--Color #151515
--pf-c-label--m-outline--BackgroundColor #ffffff
--pf-c-label--m-blue__content--Color #002952
--pf-c-label--m-blue--BackgroundColor #e7f1fa
--pf-c-label--m-blue__content--before--BorderColor #bee1f4
--pf-c-label--m-outline--m-blue__content--Color #06c
--pf-c-label--m-cyan__content--Color #3b1f00
--pf-c-label--m-cyan--BackgroundColor #f2f9f9
--pf-c-label--m-cyan__content--before--BorderColor #a2d9d9
--pf-c-label--m-outline--m-cyan__content--Color #005f60
--pf-c-label--m-green__content--Color #1e4f18
--pf-c-label--m-green--BackgroundColor #f3faf2
--pf-c-label--m-green__content--before--BorderColor #bde5b8
--pf-c-label--m-outline--m-green__content--Color #3e8635
--pf-c-label--m-orange__content--Color #003737
--pf-c-label--m-orange--BackgroundColor #fff6ec
--pf-c-label--m-orange__content--before--BorderColor #f4b678
--pf-c-label--m-outline--m-orange__content--Color #8f4700
--pf-c-label--m-purple__content--Color #1f0066
--pf-c-label--m-purple--BackgroundColor #f2f0fc
--pf-c-label--m-purple__content--before--BorderColor #cbc1ff
--pf-c-label--m-outline--m-purple__content--Color #6753ac
--pf-c-label--m-red__content--Color #7d1007
--pf-c-label--m-red--BackgroundColor #faeae8
--pf-c-label--m-red__content--before--BorderColor #c9190b
--pf-c-label--m-outline--m-red__content--Color #c9190b
--pf-c-label--m-gold__content--Color #3d2c00
--pf-c-label--m-gold--BackgroundColor #fdf7e7
--pf-c-label--m-gold__content--before--BorderColor #f9e0a2
--pf-c-label--m-outline--m-gold__content--Color #795600
--pf-c-label--m-blue__icon--Color #06c
--pf-c-label--m-cyan__icon--Color #009596
--pf-c-label--m-green__icon--Color #3e8635
--pf-c-label--m-orange__icon--Color #ec7a08
--pf-c-label--m-red__icon--Color #c9190b
--pf-c-label--m-gold__icon--Color #f0ab00
--pf-c-label--m-compact--PaddingTop 0
--pf-c-label--m-compact--PaddingRight 0.5rem
--pf-c-label--m-compact--PaddingBottom 0
--pf-c-label--m-compact--PaddingLeft 0.5rem

CSS Shadow Parts

icon

container for the label icon

close-button

container for removable labels' close button

© 2018-2024 Red Hat, Inc. Deploys by Netlify