Label group

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.

Examples

Basic

Label 1
Label 2
Label 3

Overflow

Label 1
Label 2
Label 3

Category removable

Label one
Label two
Label three

Vertical category overflow removable

Label one
Label two
Label three

Props

LabelGroup properties
Name	Type	Required	Default	Description
aria-label	string	No	'Label group category'	Aria label for label group that does not have a category name
categoryName	string	No	''	Category name text for the label group category. If this prop is supplied the label group with have a label and category styling applied
children	React.ReactNode	No		Content rendered inside the label group. Should be <Label> elements.
className	string	No		Additional classes added to the label item
closeBtnAriaLabel	string	No	'Close label group'	Aria label for close button
collapsedText	string	No	'${remaining} more'	Customizeable template string. Use variable "${remaining}" for the overflow label count.
defaultIsOpen	boolean	No	false	Flag for having the label group default to expanded
expandedText	string	No	'Show Less'	Customizable "Show Less" text string
isClosable	boolean	No	false	Flag if label group can be closed
isVertical	boolean	No	false	Flag to implement a vertical layout
numLabels	number	No	3	Set number of labels to show before overflow
onClick	(event: React.MouseEvent) => void	No	(_e: React.MouseEvent) => undefined as any	Function that is called when clicking on the label group close button
tooltipPosition	'auto' \| 'top' \| 'bottom' \| 'left' \| 'right'	No	'top'	Position of the tooltip which is displayed if the category name text is longer

Label properties
Name	Type	Required	Default	Description
children	React.ReactNode	No		Content rendered inside the label.
className	string	No	''	Additional classes added to the label.
closeBtn	React.ReactNode	No		Node for custom close button.
closeBtnProps	any	No		Additional properties for the default close button.
color	'blue' \| 'cyan' \| 'green' \| 'orange' \| 'purple' \| 'red' \| 'grey'	No	'grey'	Color of the label.
href	string	No		Href for a label that is a link. If present, the label will change to an anchor element.
icon	React.ReactNode	No		Icon added to the left of the label text.
isOverflowLabel	boolean	No		Flag indicating if the label is an overflow label
isTruncated	boolean	No	false	Flag indicating the label text should be truncated.
onClose	(event: React.MouseEvent) => void	No		Close click callback for removable labels. If present, label will have a close button.
render	({ className, content }: { className: string; content: React.ReactNode }) => React.ReactNode	No		Forwards the label content and className to rendered function. Use this prop for react router support.
variant	'outline' \| 'filled'	No	'filled'	Variant of 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	#f3faf2
--pf-c-label--m-green--BackgroundColor --pf-global--palette--green-50 $pf-color-green-50 #f3faf2
	.pf-c-label	--pf-c-label--m-green__content--Color	#1e4f18
--pf-c-label--m-green__content--Color --pf-global--success-color--200 $pf-global--success-color--200 $pf-color-green-600 #1e4f18
	.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	#f2f0fc
--pf-c-label--m-purple--BackgroundColor --pf-global--palette--purple-50 $pf-color-purple-50 #f2f0fc
	.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--m-overflow__content--Color	#06c
--pf-c-label--m-overflow__content--Color --pf-global--link--Color $pf-global--link--Color $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-label	--pf-c-label--m-overflow__content--BackgroundColor	#fff
--pf-c-label--m-overflow__content--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-label	--pf-c-label--m-overflow__content--before--BorderWidth	1px
--pf-c-label--m-overflow__content--before--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-label	--pf-c-label--m-overflow__content--before--BorderColor	#f0f0f0
--pf-c-label--m-overflow__content--before--BorderColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-label	--pf-c-label--m-overflow__content--link--hover--before--BorderWidth	2px
--pf-c-label--m-overflow__content--link--hover--before--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-label	--pf-c-label--m-overflow__content--link--hover--before--BorderColor	#f0f0f0
--pf-c-label--m-overflow__content--link--hover--before--BorderColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-label	--pf-c-label--m-overflow__content--link--focus--before--BorderWidth	2px
--pf-c-label--m-overflow__content--link--focus--before--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-label	--pf-c-label--m-overflow__content--link--focus--before--BorderColor	#f0f0f0
--pf-c-label--m-overflow__content--link--focus--before--BorderColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.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__text--MaxWidth	16ch
	.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	#f3faf2
--pf-c-label--BackgroundColor --pf-c-label--m-green--BackgroundColor --pf-global--palette--green-50 $pf-color-green-50 #f3faf2
	.pf-c-label.pf-m-green	--pf-c-label__content--Color	#1e4f18
--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-600 #1e4f18
	.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	#f2f0fc
--pf-c-label--BackgroundColor --pf-c-label--m-purple--BackgroundColor --pf-global--palette--purple-50 $pf-color-purple-50 #f2f0fc
	.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-overflow: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-overflow: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-overflow: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-overflow: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
	.pf-c-label.pf-m-overflow	--pf-c-label__content--Color	#06c
--pf-c-label__content--Color --pf-c-label--m-overflow__content--Color --pf-global--link--Color $pf-global--link--Color $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-label.pf-m-overflow	--pf-c-label--BackgroundColor	#fff
--pf-c-label--BackgroundColor --pf-c-label--m-overflow__content--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-label.pf-m-overflow	--pf-c-label__content--before--BorderWidth	1px
--pf-c-label__content--before--BorderWidth --pf-c-label--m-overflow__content--before--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-label.pf-m-overflow	--pf-c-label__content--before--BorderColor	#f0f0f0
--pf-c-label__content--before--BorderColor --pf-c-label--m-overflow__content--before--BorderColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-label.pf-m-overflow	--pf-c-label__content--link--hover--before--BorderWidth	2px
--pf-c-label__content--link--hover--before--BorderWidth --pf-c-label--m-overflow__content--link--hover--before--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-label.pf-m-overflow	--pf-c-label__content--link--hover--before--BorderColor	#f0f0f0
--pf-c-label__content--link--hover--before--BorderColor --pf-c-label--m-overflow__content--link--hover--before--BorderColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-label.pf-m-overflow	--pf-c-label__content--link--focus--before--BorderWidth	2px
--pf-c-label__content--link--focus--before--BorderWidth --pf-c-label--m-overflow__content--link--focus--before--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-label.pf-m-overflow	--pf-c-label__content--link--focus--before--BorderColor	#f0f0f0
--pf-c-label__content--link--focus--before--BorderColor --pf-c-label--m-overflow__content--link--focus--before--BorderColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	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

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines