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

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

Must

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
Default
unknown
close-button-label

Text label for a removable label's close button

DOM Property
closeButtonLabel
Type
string
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
--pf-c-label--PaddingTop var(--pf-global--spacer--xs, 0.25rem)
--pf-c-label--PaddingBottom var(--pf-global--spacer--xs, 0.25rem)
--pf-c-label--PaddingRight var(--pf-global--spacer--sm, 0.5rem)
--pf-c-label--FontSize var(--pf-global--FontSize--sm, 0.875rem)
--pf-global--FontSize--sm 0.875rem
--pf-c-label--Color var(--pf-global--Color--100, #151515)
--pf-c-label--BackgroundColor var(--pf-global--palette--black-150, #f5f5f5)
--pf-global--palette--black-150 #f5f5f5
--pf-c-label__content--MaxWidth 100%
--pf-c-label__content--Color var(--pf-global--Color--100, #151515)
--pf-global--Color--100 #151515
--pf-c-label--BorderRadius 30em
--pf-c-label__content--before--BorderWidth 1px
--pf-c-label__content--before--BorderColor var(--pf-global--palette--black-300, #d2d2d2)
--pf-c-label--m-compact--PaddingTop 0
--pf-c-label--m-compact--PaddingRight var(--pf-global--spacer--sm, 0.5rem)
--pf-c-label--m-compact--PaddingBottom 0
--pf-c-label--m-compact--PaddingLeft var(--pf-global--spacer--sm, 0.5rem)
--pf-c-label--m-blue__content--Color var(--pf-global--info-color--200, #002952)
--pf-global--info-color--200 #002952
--pf-c-label--m-blue--BackgroundColor var(--pf-global--palette--blue-50, #e7f1fa)
--pf-global--palette--blue-50 #e7f1fa
--pf-c-label--m-blue__content--before--BorderColor var(--pf-global--palette--blue-100, #bee1f4)
--pf-global--palette--blue-100 #bee1f4
--pf-c-label--m-outline--m-blue__content--Color var(--pf-global--primary-color--100, #06c)
--pf-c-label--m-cyan__content--Color var(--pf-global--default-color--300, #003737)
--pf-global--default-color--300 #003737
--pf-c-label--m-cyan--BackgroundColor var(--pf-global--palette--cyan-50, #f2f9f9)
--pf-global--palette--cyan-50 #f2f9f9
--pf-c-label--m-cyan__content--before--BorderColor var(--pf-global--palette--cyan-100, #a2d9d9)
--pf-global--palette--cyan-100 #a2d9d9
--pf-c-label--m-outline--m-cyan__content--Color var(--pf-global--palette--cyan-400, #005f60)
--pf-global--palette--cyan-400 #005f60
--pf-c-label--m-green__content--Color var(--pf-global--success-color--200, #1e4f18)
--pf-global--success-color--200 #1e4f18
--pf-c-label--m-green--BackgroundColor var(--pf-global--palette--green-50, #f3faf2)
--pf-global--palette--green-50 #f3faf2
--pf-c-label--m-green__content--before--BorderColor var(--pf-global--palette--green-100, #bde5b8)
--pf-global--palette--green-100 #bde5b8
--pf-c-label--m-outline--m-green__content--Color var(--pf-global--success-color--100, #3e8635)
--pf-c-label--m-orange__content--Color var(--pf-global--palette--orange-700, #3b1f00)
--pf-global--palette--orange-700 #3b1f00
--pf-c-label--m-orange--BackgroundColor var(--pf-global--palette--orange-50, #fff6ec)
--pf-global--palette--orange-50 #fff6ec
--pf-c-label--m-orange__content--before--BorderColor var(--pf-global--palette--orange-100, #f4b678)
--pf-global--palette--orange-100 #f4b678
--pf-c-label--m-outline--m-orange__content--Color var(--pf-global--palette--orange-500, #8f4700)
--pf-global--palette--orange-500 #8f4700
--pf-global--palette--purple-700 #1f0066
--pf-c-label--m-purple--BackgroundColor var(--pf-global--palette--purple-50, #f2f0fc)
--pf-global--palette--purple-50 #f2f0fc
--pf-c-label--m-purple__content--before--BorderColor var(--pf-global--palette--purple-100, #cbc1ff)
--pf-global--palette--purple-100 #cbc1ff
--pf-c-label--m-purple__content--Color var(--pf-global--palette--purple-500, #6753ac)
--pf-c-label--m-outline--m-purple__content--Color var(--pf-global--palette--purple-500, #6753ac)
--pf-c-label--m-red__content--Color var(--pf-global--palette--red-300, #7d1007)
--pf-global--palette--red-300 #7d1007
--pf-c-label--m-red--BackgroundColor var(--pf-global--palette--red-50, #faeae8)
--pf-global--palette--red-50 #faeae8
--pf-c-label--m-red__content--before--BorderColor var(--pf-global--palette--red-100, #c9190b)
--pf-global--palette--red-100 #c9190b
--pf-c-label--m-outline--m-red__content--Color var(--pf-global--danger-color--100, #c9190b)
--pf-c-label--m-gold__content--Color var(--pf-global--palette--gold-700, #3d2c00)
--pf-global--palette--gold-700 #3d2c00
--pf-c-label--m-gold--BackgroundColor var(--pf-global--palette--gold-50, #fdf7e7)
--pf-global--palette--gold-50 #fdf7e7
--pf-c-label--m-gold__content--before--BorderColor var(--pf-global--palette--gold-100, #f9e0a2)
--pf-global--palette--gold-100 #f9e0a2
--pf-c-label--m-outline__content--Color var(--pf-c-label--m-outline--m-gold__content--Color, var(--pf-global--palette--gold-600, #795600))
--pf-c-label--m-outline--m-gold__content--Color var(--pf-global--palette--gold-600, #795600)
--pf-global--palette--gold-600 #795600
--pf-c-label--m-outline--BackgroundColor #ffffff
--pf-global--palette--black-300 #d2d2d2
--pf-c-label--PaddingLeft var(--pf-global--spacer--md, 1rem)
--pf-global--spacer--md 1rem
--pf-c-label__icon--MarginRight var(--pf-global--spacer--xs, 0.25rem)
--pf-c-label--m-blue__icon--Color var(--pf-global--primary-color--100, #06c)
--pf-global--primary-color--100 #06c
--pf-c-label--m-cyan__icon--Color var(--pf-global--default-color--200, #009596)
--pf-global--default-color--200 #009596
--pf-c-label--m-green__icon--Color var(--pf-global--success-color--100, #3e8635)
--pf-global--success-color--100 #3e8635
--pf-c-label--m-orange__icon--Color var(--pf-global--palette--orange-300, #ec7a08)
--pf-global--palette--orange-300 #ec7a08
--pf-c-label--m-purple__icon--Color var(--pf-global--palette--purple-500, #6753ac)
--pf-global--palette--purple-500 #6753ac
--pf-c-label--m-red__icon--Color var(--pf-global--danger-color--100, #c9190b)
--pf-global--danger-color--100 #c9190b
--pf-c-label__icon--Color var(--pf-c-label--m-gold__icon--Color, var(--pf-global--palette--gold-400, #f0ab00))
--pf-c-label--m-gold__icon--Color var(--pf-global--palette--gold-400, #f0ab00)
--pf-global--palette--gold-400 #f0ab00
--pf-c-label__c-button--FontSize var(--pf-global--FontSize--xs, 0.75rem)
--pf-global--FontSize--xs 0.75rem
--pf-c-label__c-button--PaddingTop var(--pf-global--spacer--xs, 0.25rem)
--pf-c-label__c-button--PaddingRight var(--pf-global--spacer--sm, 0.5rem)
--pf-c-label__c-button--PaddingBottom var(--pf-global--spacer--xs, 0.25rem)
--pf-global--spacer--xs 0.25rem
--pf-c-label__c-button--PaddingLeft var(--pf-global--spacer--sm, 0.5rem)
--pf-global--spacer--sm 0.5rem
--pf-c-label__c-button--MarginTop -0.5rem
--pf-c-label__c-button--MarginRight -0.5rem
--pf-c-label__c-button--MarginBottom -0.5rem
--pf-c-label__c-button--MarginLeft 0.25rem

CSS Shadow Parts

icon

container for the label icon

close-button

container for removable labels' close button

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