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

Basic

Default Label Compact Label

Props

Label properties
Name	Type	Required	Default	Description
children	React.ReactNode	Yes		Content rendered inside the label.
className	string	No	''	Additional classes added to the label.

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