Label group

Info alert:Beta feature

This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more go to our Beta components page on GitHub.

Examples

Basic

Label 1
Label 2
Label 3

Overflow

Label 1
Label 2
Label 3

Category removable

Label 1
Label 2
Label 3

Vertical category overflow removable

Label 1
Label 2
Label 3

Editable labels Beta

Static label

Props

LabelGroup

*required
Name	Type	Default	Description
aria-label	string	'Label group category'	Aria label for label group that does not have a category name
categoryName	string	''	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		Content rendered inside the label group. Should be <Label> elements.
className	string		Additional classes added to the label item
closeBtnAriaLabel	string	'Close label group'	Aria label for close button
collapsedText	string	'${remaining} more'	Customizeable template string. Use variable "${remaining}" for the overflow label count.
defaultIsOpen	boolean	false	Flag for having the label group default to expanded
editableTextAreaPropsBeta	any		Additional props passed to the editable textarea.
expandedText	string	'Show Less'	Customizable "Show Less" text string
hasEditableTextAreaBeta	boolean	false	Flag indicating the editable label group should be appended with a textarea.
isClosable	boolean	false	Flag if label group can be closed
isCompact	boolean	false	Flag indicating the labels in the group are compact
isEditableBeta	boolean	false	Flag indicating contained labels are editable. Allows spacing for a text input after the labels.
isVertical	boolean	false	Flag to implement a vertical layout
numLabels	number	3	Set number of labels to show before overflow
onClick	(event: React.MouseEvent) => void	(_e: React.MouseEvent) => undefined as any	Function that is called when clicking on the label group close button
tooltipPosition	TooltipPosition \| 'auto' \| 'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'left-start' \| 'left-end' \| 'right-start' \| 'right-end'	'top'	Position of the tooltip which is displayed if the category name text is longer

Label

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside the label.
className	string	''	Additional classes added to the label.
closeBtn	React.ReactNode		Node for custom close button.
closeBtnAriaLabel	string		Aria label for close button
closeBtnProps	any		Additional properties for the default close button.
color	'blue' \| 'cyan' \| 'green' \| 'orange' \| 'purple' \| 'red' \| 'grey'	'grey'	Color of the label.
editablePropsBeta	any		Additional props passed to the editable label text div. Optionally passing onInput and onBlur callbacks will allow finer custom text input control.
href	string		Href for a label that is a link. If present, the label will change to an anchor element.
icon	React.ReactNode		Icon added to the left of the label text.
isCompact	boolean	false	Flag indicating the label is compact.
isEditableBeta	boolean	false	Flag indicating the label is editable.
isOverflowLabel	boolean		Flag indicating if the label is an overflow label
isTruncated	boolean	false	Flag indicating the label text should be truncated.
onClose	(event: React.MouseEvent) => void		Close click callback for removable labels. If present, label will have a close button.
onEditCancelBeta	(previousText: string) => void		Callback when an editable label cancels an edit.
onEditCompleteBeta	(newText: string) => void		Callback when an editable label completes an edit.
render	({ className, content, componentRef }: { className: string; content: React.ReactNode; componentRef: any; }) => React.ReactNode		Forwards the label content and className to rendered function. Use this prop for react router support.
tooltipPosition	TooltipPosition \| 'auto' \| 'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'left-start' \| 'left-end' \| 'right-start' \| 'right-end'		Position of the tooltip which is displayed if text is truncated
variant	'outline' \| 'filled'	'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	#f5f5f5
--pf-c-label--BackgroundColor --pf-global--palette--black-150 $pf-color-black-150 #f5f5f5
	.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	1px
--pf-c-label__content--before--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-label	--pf-c-label__content--before--BorderColor	#d2d2d2
--pf-c-label__content--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.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	2px
--pf-c-label__content--link--hover--before--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-label	--pf-c-label__content--link--focus--before--BorderWidth	2px
--pf-c-label__content--link--focus--before--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.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__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--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__content--before--BorderColor	#bee1f4
--pf-c-label--m-blue__content--before--BorderColor --pf-global--palette--blue-100 $pf-color-blue-100 #bee1f4
	.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--Color	#06c
--pf-c-label--m-outline--m-blue__content--Color --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	#d2d2d2
--pf-c-label--m-outline--m-blue__content--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label	--pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor	#d2d2d2
--pf-c-label--m-outline--m-blue__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--m-blue__content--link--focus--before--BorderColor	#d2d2d2
--pf-c-label--m-outline--m-blue__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-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__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--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__content--before--BorderColor	#bde5b8
--pf-c-label--m-green__content--before--BorderColor --pf-global--palette--green-100 $pf-color-green-100 #bde5b8
	.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--Color	#3e8635
--pf-c-label--m-outline--m-green__content--Color --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	#d2d2d2
--pf-c-label--m-outline--m-green__content--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label	--pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor	#d2d2d2
--pf-c-label--m-outline--m-green__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--m-green__content--link--focus--before--BorderColor	#d2d2d2
--pf-c-label--m-outline--m-green__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-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__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--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__content--before--BorderColor	#f4b678
--pf-c-label--m-orange__content--before--BorderColor --pf-global--palette--orange-100 $pf-color-orange-100 #f4b678
	.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--Color	#8f4700
--pf-c-label--m-outline--m-orange__content--Color --pf-global--palette--orange-500 $pf-color-orange-500 #8f4700
	.pf-c-label	--pf-c-label--m-outline--m-orange__content--before--BorderColor	#d2d2d2
--pf-c-label--m-outline--m-orange__content--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label	--pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor	#d2d2d2
--pf-c-label--m-outline--m-orange__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--m-orange__content--link--focus--before--BorderColor	#d2d2d2
--pf-c-label--m-outline--m-orange__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-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__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--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__content--before--BorderColor	#c9190b
--pf-c-label--m-red__content--before--BorderColor --pf-global--palette--red-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--Color	#c9190b
--pf-c-label--m-outline--m-red__content--Color --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	#d2d2d2
--pf-c-label--m-outline--m-red__content--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label	--pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor	#d2d2d2
--pf-c-label--m-outline--m-red__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--m-red__content--link--focus--before--BorderColor	#d2d2d2
--pf-c-label--m-outline--m-red__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-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__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--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__content--before--BorderColor	#cbc1ff
--pf-c-label--m-purple__content--before--BorderColor --pf-global--palette--purple-100 $pf-color-purple-100 #cbc1ff
	.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--Color	#6753ac
--pf-c-label--m-outline--m-purple__content--Color --pf-global--palette--purple-500 $pf-color-purple-500 #6753ac
	.pf-c-label	--pf-c-label--m-outline--m-purple__content--before--BorderColor	#d2d2d2
--pf-c-label--m-outline--m-purple__content--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label	--pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor	#d2d2d2
--pf-c-label--m-outline--m-purple__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--m-purple__content--link--focus--before--BorderColor	#d2d2d2
--pf-c-label--m-outline--m-purple__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-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__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--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__content--before--BorderColor	#a2d9d9
--pf-c-label--m-cyan__content--before--BorderColor --pf-global--palette--cyan-100 $pf-color-cyan-100 #a2d9d9
	.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--Color	#005f60
--pf-c-label--m-outline--m-cyan__content--Color --pf-global--palette--cyan-400 $pf-color-cyan-400 #005f60
	.pf-c-label	--pf-c-label--m-outline--m-cyan__content--before--BorderColor	#d2d2d2
--pf-c-label--m-outline--m-cyan__content--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label	--pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor	#d2d2d2
--pf-c-label--m-outline--m-cyan__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--m-cyan__content--link--focus--before--BorderColor	#d2d2d2
--pf-c-label--m-outline--m-cyan__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-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--m-compact--PaddingTop	0
	.pf-c-label	--pf-c-label--m-compact--PaddingRight	0.5rem
--pf-c-label--m-compact--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-label	--pf-c-label--m-compact--PaddingBottom	0
	.pf-c-label	--pf-c-label--m-compact--PaddingLeft	0.5rem
--pf-c-label--m-compact--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-label	--pf-c-label--m-compact--FontSize	0.75rem
--pf-c-label--m-compact--FontSize --pf-global--FontSize--xs $pf-global--FontSize--xs pf-font-prem(12px) 0.75rem
	.pf-c-label	--pf-c-label--m-compact--m-editable--TextDecorationOffset	0.0625rem
	.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__content--MaxWidth	100%
	.pf-c-label	--pf-c-label--m-outline__content--Color	#151515
--pf-c-label--m-outline__content--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-label	--pf-c-label--m-editable__content--MaxWidth	16ch
	.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-c-label--m-editable--Cursor	pointer
	.pf-c-label	--pf-c-label--m-editable--TextDecoration	underline
	.pf-c-label	--pf-c-label--m-editable--TextDecorationStyle	dashed
	.pf-c-label	--pf-c-label--m-editable--TextDecorationThickness	1px
--pf-c-label--m-editable--TextDecorationThickness --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-label	--pf-c-label--m-editable--TextDecorationOffset	0.25rem
	.pf-c-label	--pf-c-label--m-editable--TextDecorationColor	#8a8d90
--pf-c-label--m-editable--TextDecorationColor --pf-global--BorderColor--200 $pf-global--BorderColor--200 $pf-color-black-500 #8a8d90
	.pf-c-label	--pf-c-label--m-editable--hover--TextDecorationColor	#151515
--pf-c-label--m-editable--hover--TextDecorationColor --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-label	--pf-c-label--m-editable--focus--TextDecorationColor	#151515
--pf-c-label--m-editable--focus--TextDecorationColor --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-label	--pf-c-label--m-editable__content--before--BorderWidth	1px
--pf-c-label--m-editable__content--before--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-label	--pf-c-label--m-editable__content--before--BorderColor	#d2d2d2
--pf-c-label--m-editable__content--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label	--pf-c-label--m-editable__content--hover--before--BorderWidth	1px
--pf-c-label--m-editable__content--hover--before--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-label	--pf-c-label--m-editable__content--hover--before--BorderColor	#d2d2d2
--pf-c-label--m-editable__content--hover--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label	--pf-c-label--m-editable__content--focus--before--BorderWidth	1px
--pf-c-label--m-editable__content--focus--before--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-label	--pf-c-label--m-editable__content--focus--before--BorderColor	#d2d2d2
--pf-c-label--m-editable__content--focus--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label	--pf-c-label--m-editable--m-editable-active--Cursor	auto
	.pf-c-label	--pf-c-label--m-editable--m-editable-active--TextDecoration	none
	.pf-c-label	--pf-c-label--m-editable--m-editable-active--BackgroundColor	transparent
	.pf-c-label	--pf-c-label--m-editable--m-editable-active__content--before--BorderWidth	0
	.pf-c-label	--pf-c-label--m-editable--m-editable-active__content--before--BorderColor	transparent
	.pf-c-label.pf-m-compact	--pf-c-label--PaddingTop	0
--pf-c-label--PaddingTop --pf-c-label--m-compact--PaddingTop 0
	.pf-c-label.pf-m-compact	--pf-c-label--PaddingRight	0.5rem
--pf-c-label--PaddingRight --pf-c-label--m-compact--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-label.pf-m-compact	--pf-c-label--PaddingBottom	0
--pf-c-label--PaddingBottom --pf-c-label--m-compact--PaddingBottom 0
	.pf-c-label.pf-m-compact	--pf-c-label--PaddingLeft	0.5rem
--pf-c-label--PaddingLeft --pf-c-label--m-compact--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-label.pf-m-compact	--pf-c-label--FontSize	0.75rem
--pf-c-label--FontSize --pf-c-label--m-compact--FontSize --pf-global--FontSize--xs $pf-global--FontSize--xs pf-font-prem(12px) 0.75rem
	.pf-c-label.pf-m-compact	--pf-c-label--m-editable--TextDecorationOffset	0.0625rem
--pf-c-label--m-editable--TextDecorationOffset --pf-c-label--m-compact--m-editable--TextDecorationOffset 0.0625rem
	.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__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__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__content--before--BorderColor	#bee1f4
--pf-c-label__content--before--BorderColor --pf-c-label--m-blue__content--before--BorderColor --pf-global--palette--blue-100 $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--Color	#06c
--pf-c-label--m-outline__content--Color --pf-c-label--m-outline--m-blue__content--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	#d2d2d2
--pf-c-label--m-outline__content--before--BorderColor --pf-c-label--m-outline--m-blue__content--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label.pf-m-blue	--pf-c-label--m-outline__content--link--hover--before--BorderColor	#d2d2d2
--pf-c-label--m-outline__content--link--hover--before--BorderColor --pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label.pf-m-blue	--pf-c-label--m-outline__content--link--focus--before--BorderColor	#d2d2d2
--pf-c-label--m-outline__content--link--focus--before--BorderColor --pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label.pf-m-blue	--pf-c-label--m-editable__content--before--BorderColor	#bee1f4
--pf-c-label--m-editable__content--before--BorderColor --pf-c-label--m-blue__content--before--BorderColor --pf-global--palette--blue-100 $pf-color-blue-100 #bee1f4
	.pf-c-label.pf-m-blue	--pf-c-label--m-editable__content--hover--before--BorderColor	#bee1f4
--pf-c-label--m-editable__content--hover--before--BorderColor --pf-c-label--m-blue__content--before--BorderColor --pf-global--palette--blue-100 $pf-color-blue-100 #bee1f4
	.pf-c-label.pf-m-blue	--pf-c-label--m-editable__content--focus--before--BorderColor	#bee1f4
--pf-c-label--m-editable__content--focus--before--BorderColor --pf-c-label--m-blue__content--before--BorderColor --pf-global--palette--blue-100 $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__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__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__content--before--BorderColor	#bde5b8
--pf-c-label__content--before--BorderColor --pf-c-label--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--Color	#3e8635
--pf-c-label--m-outline__content--Color --pf-c-label--m-outline--m-green__content--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	#d2d2d2
--pf-c-label--m-outline__content--before--BorderColor --pf-c-label--m-outline--m-green__content--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label.pf-m-green	--pf-c-label--m-outline__content--link--hover--before--BorderColor	#d2d2d2
--pf-c-label--m-outline__content--link--hover--before--BorderColor --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label.pf-m-green	--pf-c-label--m-outline__content--link--focus--before--BorderColor	#d2d2d2
--pf-c-label--m-outline__content--link--focus--before--BorderColor --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label.pf-m-green	--pf-c-label--m-editable__content--before--BorderColor	#bde5b8
--pf-c-label--m-editable__content--before--BorderColor --pf-c-label--m-green__content--before--BorderColor --pf-global--palette--green-100 $pf-color-green-100 #bde5b8
	.pf-c-label.pf-m-green	--pf-c-label--m-editable__content--hover--before--BorderColor	#bde5b8
--pf-c-label--m-editable__content--hover--before--BorderColor --pf-c-label--m-green__content--before--BorderColor --pf-global--palette--green-100 $pf-color-green-100 #bde5b8
	.pf-c-label.pf-m-green	--pf-c-label--m-editable__content--focus--before--BorderColor	#bde5b8
--pf-c-label--m-editable__content--focus--before--BorderColor --pf-c-label--m-green__content--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__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__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__content--before--BorderColor	#f4b678
--pf-c-label__content--before--BorderColor --pf-c-label--m-orange__content--before--BorderColor --pf-global--palette--orange-100 $pf-color-orange-100 #f4b678
	.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--Color	#8f4700
--pf-c-label--m-outline__content--Color --pf-c-label--m-outline--m-orange__content--Color --pf-global--palette--orange-500 $pf-color-orange-500 #8f4700
	.pf-c-label.pf-m-orange	--pf-c-label--m-outline__content--before--BorderColor	#d2d2d2
--pf-c-label--m-outline__content--before--BorderColor --pf-c-label--m-outline--m-orange__content--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label.pf-m-orange	--pf-c-label--m-outline__content--link--hover--before--BorderColor	#d2d2d2
--pf-c-label--m-outline__content--link--hover--before--BorderColor --pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label.pf-m-orange	--pf-c-label--m-outline__content--link--focus--before--BorderColor	#d2d2d2
--pf-c-label--m-outline__content--link--focus--before--BorderColor --pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label.pf-m-orange	--pf-c-label--m-editable__content--before--BorderColor	#f4b678
--pf-c-label--m-editable__content--before--BorderColor --pf-c-label--m-orange__content--before--BorderColor --pf-global--palette--orange-100 $pf-color-orange-100 #f4b678
	.pf-c-label.pf-m-orange	--pf-c-label--m-editable__content--hover--before--BorderColor	#f4b678
--pf-c-label--m-editable__content--hover--before--BorderColor --pf-c-label--m-orange__content--before--BorderColor --pf-global--palette--orange-100 $pf-color-orange-100 #f4b678
	.pf-c-label.pf-m-orange	--pf-c-label--m-editable__content--focus--before--BorderColor	#f4b678
--pf-c-label--m-editable__content--focus--before--BorderColor --pf-c-label--m-orange__content--before--BorderColor --pf-global--palette--orange-100 $pf-color-orange-100 #f4b678
	.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__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__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__content--before--BorderColor	#c9190b
--pf-c-label__content--before--BorderColor --pf-c-label--m-red__content--before--BorderColor --pf-global--palette--red-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--Color	#c9190b
--pf-c-label--m-outline__content--Color --pf-c-label--m-outline--m-red__content--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	#d2d2d2
--pf-c-label--m-outline__content--before--BorderColor --pf-c-label--m-outline--m-red__content--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label.pf-m-red	--pf-c-label--m-outline__content--link--hover--before--BorderColor	#d2d2d2
--pf-c-label--m-outline__content--link--hover--before--BorderColor --pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label.pf-m-red	--pf-c-label--m-outline__content--link--focus--before--BorderColor	#d2d2d2
--pf-c-label--m-outline__content--link--focus--before--BorderColor --pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label.pf-m-red	--pf-c-label--m-editable__content--before--BorderColor	#c9190b
--pf-c-label--m-editable__content--before--BorderColor --pf-c-label--m-red__content--before--BorderColor --pf-global--palette--red-100 $pf-color-red-100 #c9190b
	.pf-c-label.pf-m-red	--pf-c-label--m-editable__content--hover--before--BorderColor	#c9190b
--pf-c-label--m-editable__content--hover--before--BorderColor --pf-c-label--m-red__content--before--BorderColor --pf-global--palette--red-100 $pf-color-red-100 #c9190b
	.pf-c-label.pf-m-red	--pf-c-label--m-editable__content--focus--before--BorderColor	#c9190b
--pf-c-label--m-editable__content--focus--before--BorderColor --pf-c-label--m-red__content--before--BorderColor --pf-global--palette--red-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__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__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__content--before--BorderColor	#cbc1ff
--pf-c-label__content--before--BorderColor --pf-c-label--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--Color	#6753ac
--pf-c-label--m-outline__content--Color --pf-c-label--m-outline--m-purple__content--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	#d2d2d2
--pf-c-label--m-outline__content--before--BorderColor --pf-c-label--m-outline--m-purple__content--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label.pf-m-purple	--pf-c-label--m-outline__content--link--hover--before--BorderColor	#d2d2d2
--pf-c-label--m-outline__content--link--hover--before--BorderColor --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label.pf-m-purple	--pf-c-label--m-outline__content--link--focus--before--BorderColor	#d2d2d2
--pf-c-label--m-outline__content--link--focus--before--BorderColor --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label.pf-m-purple	--pf-c-label--m-editable__content--before--BorderColor	#cbc1ff
--pf-c-label--m-editable__content--before--BorderColor --pf-c-label--m-purple__content--before--BorderColor --pf-global--palette--purple-100 $pf-color-purple-100 #cbc1ff
	.pf-c-label.pf-m-purple	--pf-c-label--m-editable__content--hover--before--BorderColor	#cbc1ff
--pf-c-label--m-editable__content--hover--before--BorderColor --pf-c-label--m-purple__content--before--BorderColor --pf-global--palette--purple-100 $pf-color-purple-100 #cbc1ff
	.pf-c-label.pf-m-purple	--pf-c-label--m-editable__content--focus--before--BorderColor	#cbc1ff
--pf-c-label--m-editable__content--focus--before--BorderColor --pf-c-label--m-purple__content--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__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__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__content--before--BorderColor	#a2d9d9
--pf-c-label__content--before--BorderColor --pf-c-label--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--Color	#005f60
--pf-c-label--m-outline__content--Color --pf-c-label--m-outline--m-cyan__content--Color --pf-global--palette--cyan-400 $pf-color-cyan-400 #005f60
	.pf-c-label.pf-m-cyan	--pf-c-label--m-outline__content--before--BorderColor	#d2d2d2
--pf-c-label--m-outline__content--before--BorderColor --pf-c-label--m-outline--m-cyan__content--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label.pf-m-cyan	--pf-c-label--m-outline__content--link--hover--before--BorderColor	#d2d2d2
--pf-c-label--m-outline__content--link--hover--before--BorderColor --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label.pf-m-cyan	--pf-c-label--m-outline__content--link--focus--before--BorderColor	#d2d2d2
--pf-c-label--m-outline__content--link--focus--before--BorderColor --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label.pf-m-cyan	--pf-c-label--m-editable__content--before--BorderColor	#a2d9d9
--pf-c-label--m-editable__content--before--BorderColor --pf-c-label--m-cyan__content--before--BorderColor --pf-global--palette--cyan-100 $pf-color-cyan-100 #a2d9d9
	.pf-c-label.pf-m-cyan	--pf-c-label--m-editable__content--hover--before--BorderColor	#a2d9d9
--pf-c-label--m-editable__content--hover--before--BorderColor --pf-c-label--m-cyan__content--before--BorderColor --pf-global--palette--cyan-100 $pf-color-cyan-100 #a2d9d9
	.pf-c-label.pf-m-cyan	--pf-c-label--m-editable__content--focus--before--BorderColor	#a2d9d9
--pf-c-label--m-editable__content--focus--before--BorderColor --pf-c-label--m-cyan__content--before--BorderColor --pf-global--palette--cyan-100 $pf-color-cyan-100 #a2d9d9
	.pf-c-label.pf-m-outline	--pf-c-label__content--Color	#151515
--pf-c-label__content--Color --pf-c-label--m-outline__content--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.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	--pf-c-label--m-editable__content--before--BorderColor	#d2d2d2
--pf-c-label--m-editable__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--m-editable__content--hover--before--BorderColor	#d2d2d2
--pf-c-label--m-editable__content--hover--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--m-editable__content--focus--before--BorderColor	#d2d2d2
--pf-c-label--m-editable__content--focus--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-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-m-editable	--pf-c-label__content--MaxWidth	16ch
--pf-c-label__content--MaxWidth --pf-c-label--m-editable__content--MaxWidth 16ch
	.pf-c-label.pf-m-editable	--pf-c-label__content--before--BorderWidth	1px
--pf-c-label__content--before--BorderWidth --pf-c-label--m-editable__content--before--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-label.pf-m-editable	--pf-c-label__content--before--BorderColor	#d2d2d2
--pf-c-label__content--before--BorderColor --pf-c-label--m-editable__content--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label.pf-m-editable	--pf-c-label__content--link--hover--before--BorderWidth	1px
--pf-c-label__content--link--hover--before--BorderWidth --pf-c-label--m-editable__content--hover--before--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-label.pf-m-editable	--pf-c-label__content--link--hover--before--BorderColor	#d2d2d2
--pf-c-label__content--link--hover--before--BorderColor --pf-c-label--m-editable__content--hover--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label.pf-m-editable	--pf-c-label__content--link--focus--before--BorderWidth	1px
--pf-c-label__content--link--focus--before--BorderWidth --pf-c-label--m-editable__content--focus--before--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-label.pf-m-editable	--pf-c-label__content--link--focus--before--BorderColor	#d2d2d2
--pf-c-label__content--link--focus--before--BorderColor --pf-c-label--m-editable__content--focus--before--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-label.pf-m-editable	--pf-c-label--m-outline__content--link--hover--before--BorderWidth	1px
--pf-c-label--m-outline__content--link--hover--before--BorderWidth --pf-c-label--m-editable__content--before--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-label.pf-m-editable	--pf-c-label--m-outline__content--link--focus--before--BorderWidth	1px
--pf-c-label--m-outline__content--link--focus--before--BorderWidth --pf-c-label--m-editable__content--before--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-label.pf-m-editable:hover	--pf-c-label--m-editable--TextDecorationColor	#151515
--pf-c-label--m-editable--TextDecorationColor --pf-c-label--m-editable--hover--TextDecorationColor --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-label.pf-m-editable:focus	--pf-c-label--m-editable--TextDecorationColor	#151515
--pf-c-label--m-editable--TextDecorationColor --pf-c-label--m-editable--focus--TextDecorationColor --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-label.pf-m-editable-active	--pf-c-label--m-editable--Cursor	auto
--pf-c-label--m-editable--Cursor --pf-c-label--m-editable--m-editable-active--Cursor auto
	.pf-c-label.pf-m-editable-active	--pf-c-label--m-editable--TextDecoration	none
--pf-c-label--m-editable--TextDecoration --pf-c-label--m-editable--m-editable-active--TextDecoration none
	.pf-c-label.pf-m-editable-active	--pf-c-label--BackgroundColor	transparent
--pf-c-label--BackgroundColor --pf-c-label--m-editable--m-editable-active--BackgroundColor transparent
	.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	2px
--pf-c-label__content--before--BorderWidth --pf-c-label__content--link--hover--before--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	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	2px
--pf-c-label__content--before--BorderWidth --pf-c-label__content--link--focus--before--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	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