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
Default Slot

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--PaddingTop

label top padding

 var(--pf-global--spacer--xs, 0.25rem)
--pf-c-label--PaddingBottom

label bottom padding

 var(--pf-global--spacer--xs, 0.25rem)
--pf-c-label--PaddingRight

label right padding

 var(--pf-global--spacer--sm, 0.5rem)
--pf-c-label--FontSize

label font size

 var(--pf-global--FontSize--sm, 0.875rem)
--pf-global--FontSize--sm 0.875rem
--pf-c-label--Color

label text color

 var(--pf-global--Color--100, #151515)
--pf-c-label--BackgroundColor

label background color

 var(--pf-global--palette--black-150, #f5f5f5)
--pf-global--palette--black-150 #f5f5f5
--pf-c-label__content--MaxWidth

label content max width

 100%
--pf-c-label__content--Color

label content text color

 var(--pf-global--Color--100, #151515)
--pf-global--Color--100 #151515
--pf-c-label--BorderRadius

label border radius

 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-c-label--m-purple__content--Color var(--pf-global--palette--purple-700, #1f0066)
--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-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

label left padding

 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

blue label icon colorcyan label icon colorgreen label icon colororange label icon colorpurple label icon colorred label icon colorgold 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
close-button
© 2018-2025 Red Hat, Inc. Deploys by Netlify