Label

Use a label when you want to highlight an element on a page to draw attention to it or make it more searchable.

Examples

Filled

Grey Grey icon Grey removable Grey icon removable Grey link Grey link removable

Blue Blue icon Blue removable Blue icon removable Blue link Blue link removable

Green Green icon Green removable Green icon removable Green link Green link removable

Orange Orange icon Orange removable Orange icon removable Orange link Orange link removable

Red Red icon Red removable Red icon removable Red link Red link removable

Purple Purple icon Purple removable Purple icon removable Purple link Purple link removable

Cyan Cyan icon Cyan removable Cyan icon removable Cyan link Cyan link removable

Outline

Documentation

Usage

Class	Applied to	Outcome
`.pf-c-label`	`<span>`	Iniates a label. Without a color modifier, the label's default style is grey. Use a color modifier to change the label color. Required
`.pf-c-label__content`	`<span>`, `<a>`	Iniates a label content. Use as an `<a>` element if the label serves as a link. Required
`.pf-c-label__icon`	`<span>`	Iniates a label icon.
`.pf-m-outline`	`.pf-c-label`	Modifies label for outline styles.
`.pf-m-blue`	`.pf-c-label`	Modifies the label to have blue colored styling.
`.pf-m-green`	`.pf-c-label`	Modifies the label to have green colored styling.
`.pf-m-orange`	`.pf-c-label`	Modifies the label to have orange colored styling.
`.pf-m-red`	`.pf-c-label`	Modifies the label to have red colored styling.
`.pf-m-purple`	`.pf-c-label`	Modifies the label to have purple colored styling.
`.pf-m-cyan`	`.pf-c-label`	Modifies the label to have cyan colored styling.

CSS Variables


	.pf-c-label	--pf-c-label--PaddingTop	0.25rem
--pf-c-label--PaddingTop --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-label	--pf-c-label--PaddingRight	0.5rem
--pf-c-label--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-label	--pf-c-label--PaddingBottom	0.25rem
--pf-c-label--PaddingBottom --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-label	--pf-c-label--PaddingLeft	0.5rem
--pf-c-label--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-label	--pf-c-label--BorderRadius	30em
--pf-c-label--BorderRadius --pf-global--BorderRadius--lg $pf-global--BorderRadius--lg 30em
	.pf-c-label	--pf-c-label--BackgroundColor	#f0f0f0
--pf-c-label--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-label	--pf-c-label--Color	#151515
--pf-c-label--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-label	--pf-c-label--FontSize	0.875rem
--pf-c-label--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-label	--pf-c-label__content--before--BorderWidth	0
	.pf-c-label	--pf-c-label__content--before--BorderColor	transparent
	.pf-c-label	--pf-c-label--m-outline--BackgroundColor	#fff
--pf-c-label--m-outline--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-label	--pf-c-label--m-outline__content--before--BorderWidth	1px
--pf-c-label--m-outline__content--before--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-label	--pf-c-label--m-outline__content--before--BorderColor	#d2d2d2
--pf-c-label--m-outline__content--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label	--pf-c-label__content--link--hover--before--BorderWidth	1px
--pf-c-label__content--link--hover--before--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-label	--pf-c-label__content--link--focus--before--BorderWidth	1px
--pf-c-label__content--link--focus--before--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-label	--pf-c-label__content--link--hover--before--BorderColor	#8a8d90
--pf-c-label__content--link--hover--before--BorderColor --pf-global--BorderColor--200 $pf-global--BorderColor--200 $pf-color-black-500 #8a8d90
	.pf-c-label	--pf-c-label__content--link--focus--before--BorderColor	#8a8d90
--pf-c-label__content--link--focus--before--BorderColor --pf-global--BorderColor--200 $pf-global--BorderColor--200 $pf-color-black-500 #8a8d90
	.pf-c-label	--pf-c-label--m-outline__content--link--hover--before--BorderWidth	2px
--pf-c-label--m-outline__content--link--hover--before--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-label	--pf-c-label--m-outline__content--link--focus--before--BorderWidth	2px
--pf-c-label--m-outline__content--link--focus--before--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-label	--pf-c-label--m-outline__content--link--hover--before--BorderColor	#d2d2d2
--pf-c-label--m-outline__content--link--hover--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label	--pf-c-label--m-outline__content--link--focus--before--BorderColor	#d2d2d2
--pf-c-label--m-outline__content--link--focus--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label	--pf-c-label--m-blue--BackgroundColor	#e7f1fa
--pf-c-label--m-blue--BackgroundColor --pf-global--palette--blue-50 $pf-color-blue-50 #e7f1fa
	.pf-c-label	--pf-c-label--m-blue__content--Color	#002952
--pf-c-label--m-blue__content--Color --pf-global--info-color--200 $pf-global--info-color--200 $pf-color-blue-600 #002952
	.pf-c-label	--pf-c-label--m-blue__icon--Color	#06c
--pf-c-label--m-blue__icon--Color --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-label	--pf-c-label--m-blue__content--link--hover--before--BorderColor	#06c
--pf-c-label--m-blue__content--link--hover--before--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-label	--pf-c-label--m-blue__content--link--focus--before--BorderColor	#06c
--pf-c-label--m-blue__content--link--focus--before--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-label	--pf-c-label--m-outline--m-blue__content--before--BorderColor	#bee1f4
--pf-c-label--m-outline--m-blue__content--before--BorderColor --pf-global--active-color--200 $pf-global--active-color--200 $pf-color-blue-100 #bee1f4
	.pf-c-label	--pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor	#bee1f4
--pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor --pf-global--active-color--200 $pf-global--active-color--200 $pf-color-blue-100 #bee1f4
	.pf-c-label	--pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor	#bee1f4
--pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor --pf-global--active-color--200 $pf-global--active-color--200 $pf-color-blue-100 #bee1f4
	.pf-c-label	--pf-c-label--m-green--BackgroundColor	#bde5b8
--pf-c-label--m-green--BackgroundColor --pf-global--palette--green-100 $pf-color-green-100 #bde5b8
	.pf-c-label	--pf-c-label--m-green__content--Color	#0f280d
--pf-c-label--m-green__content--Color --pf-global--success-color--200 $pf-global--success-color--200 $pf-color-green-700 #0f280d
	.pf-c-label	--pf-c-label--m-green__icon--Color	#3e8635
--pf-c-label--m-green__icon--Color --pf-global--success-color--100 $pf-global--success-color--100 $pf-color-green-500 #3e8635
	.pf-c-label	--pf-c-label--m-green__content--link--hover--before--BorderColor	#3e8635
--pf-c-label--m-green__content--link--hover--before--BorderColor --pf-global--success-color--100 $pf-global--success-color--100 $pf-color-green-500 #3e8635
	.pf-c-label	--pf-c-label--m-green__content--link--focus--before--BorderColor	#3e8635
--pf-c-label--m-green__content--link--focus--before--BorderColor --pf-global--success-color--100 $pf-global--success-color--100 $pf-color-green-500 #3e8635
	.pf-c-label	--pf-c-label--m-outline--m-green__content--before--BorderColor	#bde5b8
--pf-c-label--m-outline--m-green__content--before--BorderColor --pf-global--palette--green-100 $pf-color-green-100 #bde5b8
	.pf-c-label	--pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor	#bde5b8
--pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor --pf-global--palette--green-100 $pf-color-green-100 #bde5b8
	.pf-c-label	--pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor	#bde5b8
--pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor --pf-global--palette--green-100 $pf-color-green-100 #bde5b8
	.pf-c-label	--pf-c-label--m-orange--BackgroundColor	#fdf7e7
--pf-c-label--m-orange--BackgroundColor --pf-global--palette--gold-50 $pf-color-gold-50 #fdf7e7
	.pf-c-label	--pf-c-label--m-orange__content--Color	#3d2c00
--pf-c-label--m-orange__content--Color --pf-global--palette--gold-700 $pf-color-gold-700 #3d2c00
	.pf-c-label	--pf-c-label--m-orange__icon--Color	#ec7a08
--pf-c-label--m-orange__icon--Color --pf-global--palette--orange-300 $pf-color-orange-300 #ec7a08
	.pf-c-label	--pf-c-label--m-orange__content--link--hover--before--BorderColor	#ec7a08
--pf-c-label--m-orange__content--link--hover--before--BorderColor --pf-global--palette--orange-300 $pf-color-orange-300 #ec7a08
	.pf-c-label	--pf-c-label--m-orange__content--link--focus--before--BorderColor	#ec7a08
--pf-c-label--m-orange__content--link--focus--before--BorderColor --pf-global--palette--orange-300 $pf-color-orange-300 #ec7a08
	.pf-c-label	--pf-c-label--m-outline--m-orange__content--before--BorderColor	#f9e0a2
--pf-c-label--m-outline--m-orange__content--before--BorderColor --pf-global--palette--gold-100 $pf-color-gold-100 #f9e0a2
	.pf-c-label	--pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor	#f9e0a2
--pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor --pf-global--palette--gold-100 $pf-color-gold-100 #f9e0a2
	.pf-c-label	--pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor	#f9e0a2
--pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor --pf-global--palette--gold-100 $pf-color-gold-100 #f9e0a2
	.pf-c-label	--pf-c-label--m-red--BackgroundColor	#faeae8
--pf-c-label--m-red--BackgroundColor --pf-global--palette--red-50 $pf-color-red-50 #faeae8
	.pf-c-label	--pf-c-label--m-red__content--Color	#7d1007
--pf-c-label--m-red__content--Color --pf-global--palette--red-300 $pf-color-red-300 #7d1007
	.pf-c-label	--pf-c-label--m-red__icon--Color	#c9190b
--pf-c-label--m-red__icon--Color --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-label	--pf-c-label--m-red__content--link--hover--before--BorderColor	#c9190b
--pf-c-label--m-red__content--link--hover--before--BorderColor --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-label	--pf-c-label--m-red__content--link--focus--before--BorderColor	#c9190b
--pf-c-label--m-red__content--link--focus--before--BorderColor --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-label	--pf-c-label--m-outline--m-red__content--before--BorderColor	#c9190b
--pf-c-label--m-outline--m-red__content--before--BorderColor --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-label	--pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor	#c9190b
--pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-label	--pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor	#c9190b
--pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-label	--pf-c-label--m-purple--BackgroundColor	#cbc1ff
--pf-c-label--m-purple--BackgroundColor --pf-global--palette--purple-100 $pf-color-purple-100 #cbc1ff
	.pf-c-label	--pf-c-label--m-purple__content--Color	#1f0066
--pf-c-label--m-purple__content--Color --pf-global--palette--purple-700 $pf-color-purple-700 #1f0066
	.pf-c-label	--pf-c-label--m-purple__icon--Color	#6753ac
--pf-c-label--m-purple__icon--Color --pf-global--palette--purple-500 $pf-color-purple-500 #6753ac
	.pf-c-label	--pf-c-label--m-purple__content--link--hover--before--BorderColor	#6753ac
--pf-c-label--m-purple__content--link--hover--before--BorderColor --pf-global--palette--purple-500 $pf-color-purple-500 #6753ac
	.pf-c-label	--pf-c-label--m-purple__content--link--focus--before--BorderColor	#6753ac
--pf-c-label--m-purple__content--link--focus--before--BorderColor --pf-global--palette--purple-500 $pf-color-purple-500 #6753ac
	.pf-c-label	--pf-c-label--m-outline--m-purple__content--before--BorderColor	#cbc1ff
--pf-c-label--m-outline--m-purple__content--before--BorderColor --pf-global--palette--purple-100 $pf-color-purple-100 #cbc1ff
	.pf-c-label	--pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor	#cbc1ff
--pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor --pf-global--palette--purple-100 $pf-color-purple-100 #cbc1ff
	.pf-c-label	--pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor	#cbc1ff
--pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor --pf-global--palette--purple-100 $pf-color-purple-100 #cbc1ff
	.pf-c-label	--pf-c-label--m-cyan--BackgroundColor	#f2f9f9
--pf-c-label--m-cyan--BackgroundColor --pf-global--palette--cyan-50 $pf-color-cyan-50 #f2f9f9
	.pf-c-label	--pf-c-label--m-cyan__content--Color	#003737
--pf-c-label--m-cyan__content--Color --pf-global--default-color--300 $pf-global--default-color--300 $pf-color-cyan-500 #003737
	.pf-c-label	--pf-c-label--m-cyan__icon--Color	#009596
--pf-c-label--m-cyan__icon--Color --pf-global--default-color--200 $pf-global--default-color--200 $pf-color-cyan-300 #009596
	.pf-c-label	--pf-c-label--m-cyan__content--link--hover--before--BorderColor	#009596
--pf-c-label--m-cyan__content--link--hover--before--BorderColor --pf-global--default-color--200 $pf-global--default-color--200 $pf-color-cyan-300 #009596
	.pf-c-label	--pf-c-label--m-cyan__content--link--focus--before--BorderColor	#009596
--pf-c-label--m-cyan__content--link--focus--before--BorderColor --pf-global--default-color--200 $pf-global--default-color--200 $pf-color-cyan-300 #009596
	.pf-c-label	--pf-c-label--m-outline--m-cyan__content--before--BorderColor	#a2d9d9
--pf-c-label--m-outline--m-cyan__content--before--BorderColor --pf-global--palette--cyan-100 $pf-color-cyan-100 #a2d9d9
	.pf-c-label	--pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor	#a2d9d9
--pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor --pf-global--palette--cyan-100 $pf-color-cyan-100 #a2d9d9
	.pf-c-label	--pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor	#a2d9d9
--pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor --pf-global--palette--cyan-100 $pf-color-cyan-100 #a2d9d9
	.pf-c-label	--pf-c-label__content--Color	#151515
--pf-c-label__content--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-label	--pf-c-label__icon--Color	#151515
--pf-c-label__icon--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-label	--pf-c-label__icon--MarginRight	0.25rem
--pf-c-label__icon--MarginRight --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-label	--pf-c-label__c-button--FontSize	0.75rem
--pf-c-label__c-button--FontSize --pf-global--FontSize--xs $pf-global--FontSize--xs pf-font-prem(12px) 0.75rem
	.pf-c-label	--pf-c-label__c-button--MarginTop	calc(0.375rem * -1)
--pf-c-label__c-button--MarginTop calc(--pf-global--spacer--form-element * -1) calc($pf-global--spacer--form-element * -1) calc(pf-size-prem(6px) * -1) calc(0.375rem * -1)
	.pf-c-label	--pf-c-label__c-button--MarginRight	calc(0.375rem * -1)
--pf-c-label__c-button--MarginRight calc(--pf-global--spacer--form-element * -1) calc($pf-global--spacer--form-element * -1) calc(pf-size-prem(6px) * -1) calc(0.375rem * -1)
	.pf-c-label	--pf-c-label__c-button--MarginBottom	calc(0.375rem * -1)
--pf-c-label__c-button--MarginBottom calc(--pf-global--spacer--form-element * -1) calc($pf-global--spacer--form-element * -1) calc(pf-size-prem(6px) * -1) calc(0.375rem * -1)
	.pf-c-label	--pf-c-label__c-button--MarginLeft	0.25rem
--pf-c-label__c-button--MarginLeft --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-label	--pf-c-label__c-button--PaddingTop	0.25rem
--pf-c-label__c-button--PaddingTop --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-label	--pf-c-label__c-button--PaddingRight	0.5rem
--pf-c-label__c-button--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-label	--pf-c-label__c-button--PaddingBottom	0.25rem
--pf-c-label__c-button--PaddingBottom --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-label	--pf-c-label__c-button--PaddingLeft	0.5rem
--pf-c-label__c-button--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-label.pf-m-blue	--pf-c-label--BackgroundColor	#e7f1fa
--pf-c-label--BackgroundColor --pf-c-label--m-blue--BackgroundColor --pf-global--palette--blue-50 $pf-color-blue-50 #e7f1fa
	.pf-c-label.pf-m-blue	--pf-c-label__content--Color	#002952
--pf-c-label__content--Color --pf-c-label--m-blue__content--Color --pf-global--info-color--200 $pf-global--info-color--200 $pf-color-blue-600 #002952
	.pf-c-label.pf-m-blue	--pf-c-label__icon--Color	#06c
--pf-c-label__icon--Color --pf-c-label--m-blue__icon--Color --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-label.pf-m-blue	--pf-c-label--m-outline__content--before--BorderColor	#bee1f4
--pf-c-label--m-outline__content--before--BorderColor --pf-c-label--m-outline--m-blue__content--before--BorderColor --pf-global--active-color--200 $pf-global--active-color--200 $pf-color-blue-100 #bee1f4
	.pf-c-label.pf-m-blue	--pf-c-label__content--link--hover--before--BorderColor	#06c
--pf-c-label__content--link--hover--before--BorderColor --pf-c-label--m-blue__content--link--hover--before--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-label.pf-m-blue	--pf-c-label__content--link--focus--before--BorderColor	#06c
--pf-c-label__content--link--focus--before--BorderColor --pf-c-label--m-blue__content--link--focus--before--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-label.pf-m-blue	--pf-c-label--m-outline__content--link--hover--before--BorderColor	#bee1f4
--pf-c-label--m-outline__content--link--hover--before--BorderColor --pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor --pf-global--active-color--200 $pf-global--active-color--200 $pf-color-blue-100 #bee1f4
	.pf-c-label.pf-m-blue	--pf-c-label--m-outline__content--link--focus--before--BorderColor	#bee1f4
--pf-c-label--m-outline__content--link--focus--before--BorderColor --pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor --pf-global--active-color--200 $pf-global--active-color--200 $pf-color-blue-100 #bee1f4
	.pf-c-label.pf-m-green	--pf-c-label--BackgroundColor	#bde5b8
--pf-c-label--BackgroundColor --pf-c-label--m-green--BackgroundColor --pf-global--palette--green-100 $pf-color-green-100 #bde5b8
	.pf-c-label.pf-m-green	--pf-c-label__content--Color	#0f280d
--pf-c-label__content--Color --pf-c-label--m-green__content--Color --pf-global--success-color--200 $pf-global--success-color--200 $pf-color-green-700 #0f280d
	.pf-c-label.pf-m-green	--pf-c-label__icon--Color	#3e8635
--pf-c-label__icon--Color --pf-c-label--m-green__icon--Color --pf-global--success-color--100 $pf-global--success-color--100 $pf-color-green-500 #3e8635
	.pf-c-label.pf-m-green	--pf-c-label--m-outline__content--before--BorderColor	#bde5b8
--pf-c-label--m-outline__content--before--BorderColor --pf-c-label--m-outline--m-green__content--before--BorderColor --pf-global--palette--green-100 $pf-color-green-100 #bde5b8
	.pf-c-label.pf-m-green	--pf-c-label__content--link--hover--before--BorderColor	#3e8635
--pf-c-label__content--link--hover--before--BorderColor --pf-c-label--m-green__content--link--hover--before--BorderColor --pf-global--success-color--100 $pf-global--success-color--100 $pf-color-green-500 #3e8635
	.pf-c-label.pf-m-green	--pf-c-label__content--link--focus--before--BorderColor	#3e8635
--pf-c-label__content--link--focus--before--BorderColor --pf-c-label--m-green__content--link--focus--before--BorderColor --pf-global--success-color--100 $pf-global--success-color--100 $pf-color-green-500 #3e8635
	.pf-c-label.pf-m-green	--pf-c-label--m-outline__content--link--hover--before--BorderColor	#bde5b8
--pf-c-label--m-outline__content--link--hover--before--BorderColor --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor --pf-global--palette--green-100 $pf-color-green-100 #bde5b8
	.pf-c-label.pf-m-green	--pf-c-label--m-outline__content--link--focus--before--BorderColor	#bde5b8
--pf-c-label--m-outline__content--link--focus--before--BorderColor --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor --pf-global--palette--green-100 $pf-color-green-100 #bde5b8
	.pf-c-label.pf-m-orange	--pf-c-label--BackgroundColor	#fdf7e7
--pf-c-label--BackgroundColor --pf-c-label--m-orange--BackgroundColor --pf-global--palette--gold-50 $pf-color-gold-50 #fdf7e7
	.pf-c-label.pf-m-orange	--pf-c-label__content--Color	#3d2c00
--pf-c-label__content--Color --pf-c-label--m-orange__content--Color --pf-global--palette--gold-700 $pf-color-gold-700 #3d2c00
	.pf-c-label.pf-m-orange	--pf-c-label__icon--Color	#ec7a08
--pf-c-label__icon--Color --pf-c-label--m-orange__icon--Color --pf-global--palette--orange-300 $pf-color-orange-300 #ec7a08
	.pf-c-label.pf-m-orange	--pf-c-label--m-outline__content--before--BorderColor	#f9e0a2
--pf-c-label--m-outline__content--before--BorderColor --pf-c-label--m-outline--m-orange__content--before--BorderColor --pf-global--palette--gold-100 $pf-color-gold-100 #f9e0a2
	.pf-c-label.pf-m-orange	--pf-c-label__content--link--hover--before--BorderColor	#ec7a08
--pf-c-label__content--link--hover--before--BorderColor --pf-c-label--m-orange__content--link--hover--before--BorderColor --pf-global--palette--orange-300 $pf-color-orange-300 #ec7a08
	.pf-c-label.pf-m-orange	--pf-c-label__content--link--focus--before--BorderColor	#ec7a08
--pf-c-label__content--link--focus--before--BorderColor --pf-c-label--m-orange__content--link--focus--before--BorderColor --pf-global--palette--orange-300 $pf-color-orange-300 #ec7a08
	.pf-c-label.pf-m-orange	--pf-c-label--m-outline__content--link--hover--before--BorderColor	#f9e0a2
--pf-c-label--m-outline__content--link--hover--before--BorderColor --pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor --pf-global--palette--gold-100 $pf-color-gold-100 #f9e0a2
	.pf-c-label.pf-m-orange	--pf-c-label--m-outline__content--link--focus--before--BorderColor	#f9e0a2
--pf-c-label--m-outline__content--link--focus--before--BorderColor --pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor --pf-global--palette--gold-100 $pf-color-gold-100 #f9e0a2
	.pf-c-label.pf-m-red	--pf-c-label--BackgroundColor	#faeae8
--pf-c-label--BackgroundColor --pf-c-label--m-red--BackgroundColor --pf-global--palette--red-50 $pf-color-red-50 #faeae8
	.pf-c-label.pf-m-red	--pf-c-label__content--Color	#7d1007
--pf-c-label__content--Color --pf-c-label--m-red__content--Color --pf-global--palette--red-300 $pf-color-red-300 #7d1007
	.pf-c-label.pf-m-red	--pf-c-label__icon--Color	#c9190b
--pf-c-label__icon--Color --pf-c-label--m-red__icon--Color --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-label.pf-m-red	--pf-c-label--m-outline__content--before--BorderColor	#c9190b
--pf-c-label--m-outline__content--before--BorderColor --pf-c-label--m-outline--m-red__content--before--BorderColor --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-label.pf-m-red	--pf-c-label__content--link--hover--before--BorderColor	#c9190b
--pf-c-label__content--link--hover--before--BorderColor --pf-c-label--m-red__content--link--hover--before--BorderColor --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-label.pf-m-red	--pf-c-label__content--link--focus--before--BorderColor	#c9190b
--pf-c-label__content--link--focus--before--BorderColor --pf-c-label--m-red__content--link--focus--before--BorderColor --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-label.pf-m-red	--pf-c-label--m-outline__content--link--hover--before--BorderColor	#c9190b
--pf-c-label--m-outline__content--link--hover--before--BorderColor --pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-label.pf-m-red	--pf-c-label--m-outline__content--link--focus--before--BorderColor	#c9190b
--pf-c-label--m-outline__content--link--focus--before--BorderColor --pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-label.pf-m-purple	--pf-c-label--BackgroundColor	#cbc1ff
--pf-c-label--BackgroundColor --pf-c-label--m-purple--BackgroundColor --pf-global--palette--purple-100 $pf-color-purple-100 #cbc1ff
	.pf-c-label.pf-m-purple	--pf-c-label__content--Color	#1f0066
--pf-c-label__content--Color --pf-c-label--m-purple__content--Color --pf-global--palette--purple-700 $pf-color-purple-700 #1f0066
	.pf-c-label.pf-m-purple	--pf-c-label__icon--Color	#6753ac
--pf-c-label__icon--Color --pf-c-label--m-purple__icon--Color --pf-global--palette--purple-500 $pf-color-purple-500 #6753ac
	.pf-c-label.pf-m-purple	--pf-c-label--m-outline__content--before--BorderColor	#cbc1ff
--pf-c-label--m-outline__content--before--BorderColor --pf-c-label--m-outline--m-purple__content--before--BorderColor --pf-global--palette--purple-100 $pf-color-purple-100 #cbc1ff
	.pf-c-label.pf-m-purple	--pf-c-label__content--link--hover--before--BorderColor	#6753ac
--pf-c-label__content--link--hover--before--BorderColor --pf-c-label--m-purple__content--link--hover--before--BorderColor --pf-global--palette--purple-500 $pf-color-purple-500 #6753ac
	.pf-c-label.pf-m-purple	--pf-c-label__content--link--focus--before--BorderColor	#6753ac
--pf-c-label__content--link--focus--before--BorderColor --pf-c-label--m-purple__content--link--focus--before--BorderColor --pf-global--palette--purple-500 $pf-color-purple-500 #6753ac
	.pf-c-label.pf-m-purple	--pf-c-label--m-outline__content--link--hover--before--BorderColor	#cbc1ff
--pf-c-label--m-outline__content--link--hover--before--BorderColor --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor --pf-global--palette--purple-100 $pf-color-purple-100 #cbc1ff
	.pf-c-label.pf-m-purple	--pf-c-label--m-outline__content--link--focus--before--BorderColor	#cbc1ff
--pf-c-label--m-outline__content--link--focus--before--BorderColor --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor --pf-global--palette--purple-100 $pf-color-purple-100 #cbc1ff
	.pf-c-label.pf-m-cyan	--pf-c-label--BackgroundColor	#f2f9f9
--pf-c-label--BackgroundColor --pf-c-label--m-cyan--BackgroundColor --pf-global--palette--cyan-50 $pf-color-cyan-50 #f2f9f9
	.pf-c-label.pf-m-cyan	--pf-c-label__content--Color	#003737
--pf-c-label__content--Color --pf-c-label--m-cyan__content--Color --pf-global--default-color--300 $pf-global--default-color--300 $pf-color-cyan-500 #003737
	.pf-c-label.pf-m-cyan	--pf-c-label__icon--Color	#009596
--pf-c-label__icon--Color --pf-c-label--m-cyan__icon--Color --pf-global--default-color--200 $pf-global--default-color--200 $pf-color-cyan-300 #009596
	.pf-c-label.pf-m-cyan	--pf-c-label--m-outline__content--before--BorderColor	#a2d9d9
--pf-c-label--m-outline__content--before--BorderColor --pf-c-label--m-outline--m-cyan__content--before--BorderColor --pf-global--palette--cyan-100 $pf-color-cyan-100 #a2d9d9
	.pf-c-label.pf-m-cyan	--pf-c-label__content--link--hover--before--BorderColor	#009596
--pf-c-label__content--link--hover--before--BorderColor --pf-c-label--m-cyan__content--link--hover--before--BorderColor --pf-global--default-color--200 $pf-global--default-color--200 $pf-color-cyan-300 #009596
	.pf-c-label.pf-m-cyan	--pf-c-label__content--link--focus--before--BorderColor	#009596
--pf-c-label__content--link--focus--before--BorderColor --pf-c-label--m-cyan__content--link--focus--before--BorderColor --pf-global--default-color--200 $pf-global--default-color--200 $pf-color-cyan-300 #009596
	.pf-c-label.pf-m-cyan	--pf-c-label--m-outline__content--link--hover--before--BorderColor	#a2d9d9
--pf-c-label--m-outline__content--link--hover--before--BorderColor --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor --pf-global--palette--cyan-100 $pf-color-cyan-100 #a2d9d9
	.pf-c-label.pf-m-cyan	--pf-c-label--m-outline__content--link--focus--before--BorderColor	#a2d9d9
--pf-c-label--m-outline__content--link--focus--before--BorderColor --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor --pf-global--palette--cyan-100 $pf-color-cyan-100 #a2d9d9
	.pf-c-label.pf-m-outline	--pf-c-label__content--before--BorderWidth	1px
--pf-c-label__content--before--BorderWidth --pf-c-label--m-outline__content--before--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-label.pf-m-outline	--pf-c-label__content--before--BorderColor	#d2d2d2
--pf-c-label__content--before--BorderColor --pf-c-label--m-outline__content--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label.pf-m-outline	--pf-c-label--BackgroundColor	#fff
--pf-c-label--BackgroundColor --pf-c-label--m-outline--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-label.pf-m-outline a.pf-c-label__content:hover	--pf-c-label__content--before--BorderWidth	2px
--pf-c-label__content--before--BorderWidth --pf-c-label--m-outline__content--link--hover--before--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-label.pf-m-outline a.pf-c-label__content:hover	--pf-c-label__content--before--BorderColor	#d2d2d2
--pf-c-label__content--before--BorderColor --pf-c-label--m-outline__content--link--hover--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label.pf-m-outline a.pf-c-label__content:focus	--pf-c-label__content--before--BorderWidth	2px
--pf-c-label__content--before--BorderWidth --pf-c-label--m-outline__content--link--focus--before--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-label.pf-m-outline a.pf-c-label__content:focus	--pf-c-label__content--before--BorderColor	#d2d2d2
--pf-c-label__content--before--BorderColor --pf-c-label--m-outline__content--link--focus--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label .pf-c-button	--pf-c-button--FontSize	0.75rem
--pf-c-button--FontSize --pf-c-label__c-button--FontSize --pf-global--FontSize--xs $pf-global--FontSize--xs pf-font-prem(12px) 0.75rem
	.pf-c-label .pf-c-button	--pf-c-button--PaddingTop	0.25rem
--pf-c-button--PaddingTop --pf-c-label__c-button--PaddingTop --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-label .pf-c-button	--pf-c-button--PaddingRight	0.5rem
--pf-c-button--PaddingRight --pf-c-label__c-button--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-label .pf-c-button	--pf-c-button--PaddingBottom	0.25rem
--pf-c-button--PaddingBottom --pf-c-label__c-button--PaddingBottom --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-label .pf-c-button	--pf-c-button--PaddingLeft	0.5rem
--pf-c-button--PaddingLeft --pf-c-label__c-button--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	a.pf-c-label__content:hover	--pf-c-label__content--before--BorderWidth	1px
--pf-c-label__content--before--BorderWidth --pf-c-label__content--link--hover--before--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	a.pf-c-label__content:hover	--pf-c-label__content--before--BorderColor	#8a8d90
--pf-c-label__content--before--BorderColor --pf-c-label__content--link--hover--before--BorderColor --pf-global--BorderColor--200 $pf-global--BorderColor--200 $pf-color-black-500 #8a8d90
	a.pf-c-label__content:focus	--pf-c-label__content--before--BorderWidth	1px
--pf-c-label__content--before--BorderWidth --pf-c-label__content--link--focus--before--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	a.pf-c-label__content:focus	--pf-c-label__content--before--BorderColor	#8a8d90
--pf-c-label__content--before--BorderColor --pf-c-label__content--link--focus--before--BorderColor --pf-global--BorderColor--200 $pf-global--BorderColor--200 $pf-color-black-500 #8a8d90