Skip to content
Patternfly Logo

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

  • 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

Editable labels with add button

For additional documentation that showcases adding a new label, see label group demos.

  • Label 1
  • Label 2

Props

LabelGroup

*required
NameTypeDefaultDescription
addLabelControlBetaReact.ReactNodeControl for adding new labels
aria-labelstring'Label group category'Aria label for label group that does not have a category name
categoryNamestring''Category name text for the label group category. If this prop is supplied the label group with have a label and category styling applied
childrenReact.ReactNodeContent rendered inside the label group. Should be <Label> elements.
classNamestringAdditional classes added to the label item
closeBtnAriaLabelstring'Close label group'Aria label for close button
collapsedTextstring'${remaining} more'Customizeable template string. Use variable "${remaining}" for the overflow label count.
defaultIsOpenbooleanfalseFlag for having the label group default to expanded
editableTextAreaPropsBetaanyAdditional props passed to the editable textarea.
expandedTextstring'Show Less'Customizable "Show Less" text string
hasEditableTextAreaBetabooleanfalseFlag indicating the editable label group should be appended with a textarea.
isClosablebooleanfalseFlag if label group can be closed
isCompactbooleanfalseFlag indicating the labels in the group are compact
isEditableBetabooleanfalseFlag indicating contained labels are editable. Allows spacing for a text input after the labels.
isVerticalbooleanfalseFlag to implement a vertical layout
numLabelsnumber3Set number of labels to show before overflow
onClick(event: React.MouseEvent) => void(_e: React.MouseEvent) => undefined as anyFunction that is called when clicking on the label group close button
tooltipPositionTooltipPosition | '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
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the label.
classNamestring''Additional classes added to the label.
closeBtnReact.ReactNodeNode for custom close button.
closeBtnAriaLabelstringAria label for close button
closeBtnPropsanyAdditional properties for the default close button.
color'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey' | 'gold''grey'Color of the label.
editablePropsBetaanyAdditional props passed to the editable label text div. Optionally passing onInput and onBlur callbacks will allow finer custom text input control.
hrefstringHref for a label that is a link. If present, the label will change to an anchor element.
iconReact.ReactNodeIcon added to the left of the label text.
isCompactbooleanfalseFlag indicating the label is compact.
isEditableBetabooleanfalseFlag indicating the label is editable.
isOverflowLabelbooleanFlag indicating if the label is an overflow label
isTruncatedbooleanfalseFlag indicating the label text should be truncated.
onClose(event: React.MouseEvent) => voidClose click callback for removable labels. If present, label will have a close button.
onEditCancelBeta(previousText: string) => voidCallback when an editable label cancels an edit.
onEditCompleteBeta(newText: string) => voidCallback when an editable label completes an edit.
render({ className, content, componentRef }: { className: string; content: React.ReactNode; componentRef: any; }) => React.ReactNodeForwards the label content and className to rendered function. Use this prop for react router support.
tooltipPositionTooltipPosition | '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--pf-c-label--PaddingRight
0.5rem
.pf-c-label--pf-c-label--PaddingBottom
0.25rem
.pf-c-label--pf-c-label--PaddingLeft
0.5rem
.pf-c-label--pf-c-label--BorderRadius
30em
.pf-c-label--pf-c-label--BackgroundColor
#f5f5f5
.pf-c-label--pf-c-label--Color
#151515
.pf-c-label--pf-c-label--FontSize
0.875rem
.pf-c-label--pf-c-label__content--before--BorderWidth
1px
.pf-c-label--pf-c-label__content--before--BorderColor
#d2d2d2
.pf-c-label--pf-c-label--m-outline--BackgroundColor
#fff
.pf-c-label--pf-c-label--m-outline__content--before--BorderWidth
1px
.pf-c-label--pf-c-label--m-outline__content--before--BorderColor
#d2d2d2
.pf-c-label--pf-c-label__content--link--hover--before--BorderWidth
2px
.pf-c-label--pf-c-label__content--link--focus--before--BorderWidth
2px
.pf-c-label--pf-c-label__content--link--hover--before--BorderColor
#8a8d90
.pf-c-label--pf-c-label__content--link--focus--before--BorderColor
#8a8d90
.pf-c-label--pf-c-label--m-outline__content--link--hover--before--BorderWidth
2px
.pf-c-label--pf-c-label--m-outline__content--link--focus--before--BorderWidth
2px
.pf-c-label--pf-c-label--m-outline__content--link--hover--before--BorderColor
#d2d2d2
.pf-c-label--pf-c-label--m-outline__content--link--focus--before--BorderColor
#d2d2d2
.pf-c-label--pf-c-label--m-blue--BackgroundColor
#e7f1fa
.pf-c-label--pf-c-label--m-blue__icon--Color
#06c
.pf-c-label--pf-c-label--m-blue__content--Color
#002952
.pf-c-label--pf-c-label--m-blue__content--before--BorderColor
#bee1f4
.pf-c-label--pf-c-label--m-blue__content--link--hover--before--BorderColor
#06c
.pf-c-label--pf-c-label--m-blue__content--link--focus--before--BorderColor
#06c
.pf-c-label--pf-c-label--m-outline--m-blue__content--Color
#06c
.pf-c-label--pf-c-label--m-outline--m-blue__content--before--BorderColor
#d2d2d2
.pf-c-label--pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor
#d2d2d2
.pf-c-label--pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor
#d2d2d2
.pf-c-label--pf-c-label--m-green--BackgroundColor
#f3faf2
.pf-c-label--pf-c-label--m-green__icon--Color
#3e8635
.pf-c-label--pf-c-label--m-green__content--Color
#1e4f18
.pf-c-label--pf-c-label--m-green__content--before--BorderColor
#bde5b8
.pf-c-label--pf-c-label--m-green__content--link--hover--before--BorderColor
#3e8635
.pf-c-label--pf-c-label--m-green__content--link--focus--before--BorderColor
#3e8635
.pf-c-label--pf-c-label--m-outline--m-green__content--Color
#3e8635
.pf-c-label--pf-c-label--m-outline--m-green__content--before--BorderColor
#d2d2d2
.pf-c-label--pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor
#d2d2d2
.pf-c-label--pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor
#d2d2d2
.pf-c-label--pf-c-label--m-orange--BackgroundColor
#fff6ec
.pf-c-label--pf-c-label--m-orange__icon--Color
#ec7a08
.pf-c-label--pf-c-label--m-orange__content--Color
#3b1f00
.pf-c-label--pf-c-label--m-orange__content--before--BorderColor
#f4b678
.pf-c-label--pf-c-label--m-orange__content--link--hover--before--BorderColor
#ec7a08
.pf-c-label--pf-c-label--m-orange__content--link--focus--before--BorderColor
#ec7a08
.pf-c-label--pf-c-label--m-outline--m-orange__content--Color
#8f4700
.pf-c-label--pf-c-label--m-outline--m-orange__content--before--BorderColor
#d2d2d2
.pf-c-label--pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor
#d2d2d2
.pf-c-label--pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor
#d2d2d2
.pf-c-label--pf-c-label--m-red--BackgroundColor
#faeae8
.pf-c-label--pf-c-label--m-red__icon--Color
#c9190b
.pf-c-label--pf-c-label--m-red__content--Color
#7d1007
.pf-c-label--pf-c-label--m-red__content--before--BorderColor
#c9190b
.pf-c-label--pf-c-label--m-red__content--link--hover--before--BorderColor
#c9190b
.pf-c-label--pf-c-label--m-red__content--link--focus--before--BorderColor
#c9190b
.pf-c-label--pf-c-label--m-outline--m-red__content--Color
#c9190b
.pf-c-label--pf-c-label--m-outline--m-red__content--before--BorderColor
#d2d2d2
.pf-c-label--pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor
#d2d2d2
.pf-c-label--pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor
#d2d2d2
.pf-c-label--pf-c-label--m-purple--BackgroundColor
#f2f0fc
.pf-c-label--pf-c-label--m-purple__icon--Color
#6753ac
.pf-c-label--pf-c-label--m-purple__content--Color
#1f0066
.pf-c-label--pf-c-label--m-purple__content--before--BorderColor
#cbc1ff
.pf-c-label--pf-c-label--m-purple__content--link--hover--before--BorderColor
#6753ac
.pf-c-label--pf-c-label--m-purple__content--link--focus--before--BorderColor
#6753ac
.pf-c-label--pf-c-label--m-outline--m-purple__content--Color
#6753ac
.pf-c-label--pf-c-label--m-outline--m-purple__content--before--BorderColor
#d2d2d2
.pf-c-label--pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor
#d2d2d2
.pf-c-label--pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor
#d2d2d2
.pf-c-label--pf-c-label--m-cyan--BackgroundColor
#f2f9f9
.pf-c-label--pf-c-label--m-cyan__icon--Color
#009596
.pf-c-label--pf-c-label--m-cyan__content--Color
#003737
.pf-c-label--pf-c-label--m-cyan__content--before--BorderColor
#a2d9d9
.pf-c-label--pf-c-label--m-cyan__content--link--hover--before--BorderColor
#009596
.pf-c-label--pf-c-label--m-cyan__content--link--focus--before--BorderColor
#009596
.pf-c-label--pf-c-label--m-outline--m-cyan__content--Color
#005f60
.pf-c-label--pf-c-label--m-outline--m-cyan__content--before--BorderColor
#d2d2d2
.pf-c-label--pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor
#d2d2d2
.pf-c-label--pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor
#d2d2d2
.pf-c-label--pf-c-label--m-gold--BackgroundColor
#fdf7e7
.pf-c-label--pf-c-label--m-gold__icon--Color
#f0ab00
.pf-c-label--pf-c-label--m-gold__content--Color
#3d2c00
.pf-c-label--pf-c-label--m-gold__content--before--BorderColor
#f9e0a2
.pf-c-label--pf-c-label--m-gold__content--link--hover--before--BorderColor
#f4c145
.pf-c-label--pf-c-label--m-gold__content--link--focus--before--BorderColor
#f4c145
.pf-c-label--pf-c-label--m-outline--m-gold__content--Color
#795600
.pf-c-label--pf-c-label--m-outline--m-gold__content--before--BorderColor
#d2d2d2
.pf-c-label--pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor
#d2d2d2
.pf-c-label--pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor
#d2d2d2
.pf-c-label--pf-c-label--m-overflow__content--Color
#06c
.pf-c-label--pf-c-label--m-overflow__content--BackgroundColor
#fff
.pf-c-label--pf-c-label--m-overflow__content--before--BorderWidth
1px
.pf-c-label--pf-c-label--m-overflow__content--before--BorderColor
#f0f0f0
.pf-c-label--pf-c-label--m-overflow__content--link--hover--before--BorderWidth
2px
.pf-c-label--pf-c-label--m-overflow__content--link--hover--before--BorderColor
#f0f0f0
.pf-c-label--pf-c-label--m-overflow__content--link--focus--before--BorderWidth
2px
.pf-c-label--pf-c-label--m-overflow__content--link--focus--before--BorderColor
#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--pf-c-label--m-compact--PaddingBottom
0
.pf-c-label--pf-c-label--m-compact--PaddingLeft
0.5rem
.pf-c-label--pf-c-label--m-compact--FontSize
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--pf-c-label__content--MaxWidth
100%
.pf-c-label--pf-c-label--m-outline__content--Color
#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--pf-c-label__icon--MarginRight
0.25rem
.pf-c-label--pf-c-label__c-button--FontSize
0.75rem
.pf-c-label--pf-c-label__c-button--MarginTop
calc(0.375rem * -1)
.pf-c-label--pf-c-label__c-button--MarginRight
calc(0.375rem * -1)
.pf-c-label--pf-c-label__c-button--MarginBottom
calc(0.375rem * -1)
.pf-c-label--pf-c-label__c-button--MarginLeft
0.25rem
.pf-c-label--pf-c-label__c-button--PaddingTop
0.25rem
.pf-c-label--pf-c-label__c-button--PaddingRight
0.5rem
.pf-c-label--pf-c-label__c-button--PaddingBottom
0.25rem
.pf-c-label--pf-c-label__c-button--PaddingLeft
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--pf-c-label--m-editable--TextDecorationOffset
0.25rem
.pf-c-label--pf-c-label--m-editable--TextDecorationColor
#8a8d90
.pf-c-label--pf-c-label--m-editable--hover--TextDecorationColor
#151515
.pf-c-label--pf-c-label--m-editable--focus--TextDecorationColor
#151515
.pf-c-label--pf-c-label--m-editable__content--before--BorderWidth
1px
.pf-c-label--pf-c-label--m-editable__content--before--BorderColor
#d2d2d2
.pf-c-label--pf-c-label--m-editable__content--hover--before--BorderWidth
1px
.pf-c-label--pf-c-label--m-editable__content--hover--before--BorderColor
#d2d2d2
.pf-c-label--pf-c-label--m-editable__content--focus--before--BorderWidth
1px
.pf-c-label--pf-c-label--m-editable__content--focus--before--BorderColor
#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.pf-m-compact--pf-c-label--PaddingRight
0.5rem
.pf-c-label.pf-m-compact--pf-c-label--PaddingBottom
0
.pf-c-label.pf-m-compact--pf-c-label--PaddingLeft
0.5rem
.pf-c-label.pf-m-compact--pf-c-label--FontSize
0.75rem
.pf-c-label.pf-m-compact--pf-c-label--m-editable--TextDecorationOffset
0.0625rem
.pf-c-label.pf-m-blue--pf-c-label--BackgroundColor
#e7f1fa
.pf-c-label.pf-m-blue--pf-c-label__icon--Color
#06c
.pf-c-label.pf-m-blue--pf-c-label__content--Color
#002952
.pf-c-label.pf-m-blue--pf-c-label__content--before--BorderColor
#bee1f4
.pf-c-label.pf-m-blue--pf-c-label__content--link--hover--before--BorderColor
#06c
.pf-c-label.pf-m-blue--pf-c-label__content--link--focus--before--BorderColor
#06c
.pf-c-label.pf-m-blue--pf-c-label--m-outline__content--Color
#06c
.pf-c-label.pf-m-blue--pf-c-label--m-outline__content--before--BorderColor
#d2d2d2
.pf-c-label.pf-m-blue--pf-c-label--m-outline__content--link--hover--before--BorderColor
#d2d2d2
.pf-c-label.pf-m-blue--pf-c-label--m-outline__content--link--focus--before--BorderColor
#d2d2d2
.pf-c-label.pf-m-blue--pf-c-label--m-editable__content--before--BorderColor
#bee1f4
.pf-c-label.pf-m-blue--pf-c-label--m-editable__content--hover--before--BorderColor
#bee1f4
.pf-c-label.pf-m-blue--pf-c-label--m-editable__content--focus--before--BorderColor
#bee1f4
.pf-c-label.pf-m-green--pf-c-label--BackgroundColor
#f3faf2
.pf-c-label.pf-m-green--pf-c-label__icon--Color
#3e8635
.pf-c-label.pf-m-green--pf-c-label__content--Color
#1e4f18
.pf-c-label.pf-m-green--pf-c-label__content--before--BorderColor
#bde5b8
.pf-c-label.pf-m-green--pf-c-label__content--link--hover--before--BorderColor
#3e8635
.pf-c-label.pf-m-green--pf-c-label__content--link--focus--before--BorderColor
#3e8635
.pf-c-label.pf-m-green--pf-c-label--m-outline__content--Color
#3e8635
.pf-c-label.pf-m-green--pf-c-label--m-outline__content--before--BorderColor
#d2d2d2
.pf-c-label.pf-m-green--pf-c-label--m-outline__content--link--hover--before--BorderColor
#d2d2d2
.pf-c-label.pf-m-green--pf-c-label--m-outline__content--link--focus--before--BorderColor
#d2d2d2
.pf-c-label.pf-m-green--pf-c-label--m-editable__content--before--BorderColor
#bde5b8
.pf-c-label.pf-m-green--pf-c-label--m-editable__content--hover--before--BorderColor
#bde5b8
.pf-c-label.pf-m-green--pf-c-label--m-editable__content--focus--before--BorderColor
#bde5b8
.pf-c-label.pf-m-orange--pf-c-label--BackgroundColor
#fff6ec
.pf-c-label.pf-m-orange--pf-c-label__icon--Color
#ec7a08
.pf-c-label.pf-m-orange--pf-c-label__content--Color
#3b1f00
.pf-c-label.pf-m-orange--pf-c-label__content--before--BorderColor
#f4b678
.pf-c-label.pf-m-orange--pf-c-label__content--link--hover--before--BorderColor
#ec7a08
.pf-c-label.pf-m-orange--pf-c-label__content--link--focus--before--BorderColor
#ec7a08
.pf-c-label.pf-m-orange--pf-c-label--m-outline__content--Color
#8f4700
.pf-c-label.pf-m-orange--pf-c-label--m-outline__content--before--BorderColor
#d2d2d2
.pf-c-label.pf-m-orange--pf-c-label--m-outline__content--link--hover--before--BorderColor
#d2d2d2
.pf-c-label.pf-m-orange--pf-c-label--m-outline__content--link--focus--before--BorderColor
#d2d2d2
.pf-c-label.pf-m-orange--pf-c-label--m-editable__content--before--BorderColor
#f4b678
.pf-c-label.pf-m-orange--pf-c-label--m-editable__content--hover--before--BorderColor
#f4b678
.pf-c-label.pf-m-orange--pf-c-label--m-editable__content--focus--before--BorderColor
#f4b678
.pf-c-label.pf-m-red--pf-c-label--BackgroundColor
#faeae8
.pf-c-label.pf-m-red--pf-c-label__icon--Color
#c9190b
.pf-c-label.pf-m-red--pf-c-label__content--Color
#7d1007
.pf-c-label.pf-m-red--pf-c-label__content--before--BorderColor
#c9190b
.pf-c-label.pf-m-red--pf-c-label__content--link--hover--before--BorderColor
#c9190b
.pf-c-label.pf-m-red--pf-c-label__content--link--focus--before--BorderColor
#c9190b
.pf-c-label.pf-m-red--pf-c-label--m-outline__content--Color
#c9190b
.pf-c-label.pf-m-red--pf-c-label--m-outline__content--before--BorderColor
#d2d2d2
.pf-c-label.pf-m-red--pf-c-label--m-outline__content--link--hover--before--BorderColor
#d2d2d2
.pf-c-label.pf-m-red--pf-c-label--m-outline__content--link--focus--before--BorderColor
#d2d2d2
.pf-c-label.pf-m-red--pf-c-label--m-editable__content--before--BorderColor
#c9190b
.pf-c-label.pf-m-red--pf-c-label--m-editable__content--hover--before--BorderColor
#c9190b
.pf-c-label.pf-m-red--pf-c-label--m-editable__content--focus--before--BorderColor
#c9190b
.pf-c-label.pf-m-purple--pf-c-label--BackgroundColor
#f2f0fc
.pf-c-label.pf-m-purple--pf-c-label__icon--Color
#6753ac
.pf-c-label.pf-m-purple--pf-c-label__content--Color
#1f0066
.pf-c-label.pf-m-purple--pf-c-label__content--before--BorderColor
#cbc1ff
.pf-c-label.pf-m-purple--pf-c-label__content--link--hover--before--BorderColor
#6753ac
.pf-c-label.pf-m-purple--pf-c-label__content--link--focus--before--BorderColor
#6753ac
.pf-c-label.pf-m-purple--pf-c-label--m-outline__content--Color
#6753ac
.pf-c-label.pf-m-purple--pf-c-label--m-outline__content--before--BorderColor
#d2d2d2
.pf-c-label.pf-m-purple--pf-c-label--m-outline__content--link--hover--before--BorderColor
#d2d2d2
.pf-c-label.pf-m-purple--pf-c-label--m-outline__content--link--focus--before--BorderColor
#d2d2d2
.pf-c-label.pf-m-purple--pf-c-label--m-editable__content--before--BorderColor
#cbc1ff
.pf-c-label.pf-m-purple--pf-c-label--m-editable__content--hover--before--BorderColor
#cbc1ff
.pf-c-label.pf-m-purple--pf-c-label--m-editable__content--focus--before--BorderColor
#cbc1ff
.pf-c-label.pf-m-cyan--pf-c-label--BackgroundColor
#f2f9f9
.pf-c-label.pf-m-cyan--pf-c-label__icon--Color
#009596
.pf-c-label.pf-m-cyan--pf-c-label__content--Color
#003737
.pf-c-label.pf-m-cyan--pf-c-label__content--before--BorderColor
#a2d9d9
.pf-c-label.pf-m-cyan--pf-c-label__content--link--hover--before--BorderColor
#009596
.pf-c-label.pf-m-cyan--pf-c-label__content--link--focus--before--BorderColor
#009596
.pf-c-label.pf-m-cyan--pf-c-label--m-outline__content--Color
#005f60
.pf-c-label.pf-m-cyan--pf-c-label--m-outline__content--before--BorderColor
#d2d2d2
.pf-c-label.pf-m-cyan--pf-c-label--m-outline__content--link--hover--before--BorderColor
#d2d2d2
.pf-c-label.pf-m-cyan--pf-c-label--m-outline__content--link--focus--before--BorderColor
#d2d2d2
.pf-c-label.pf-m-cyan--pf-c-label--m-editable__content--before--BorderColor
#a2d9d9
.pf-c-label.pf-m-cyan--pf-c-label--m-editable__content--hover--before--BorderColor
#a2d9d9
.pf-c-label.pf-m-cyan--pf-c-label--m-editable__content--focus--before--BorderColor
#a2d9d9
.pf-c-label.pf-m-gold--pf-c-label--BackgroundColor
#fdf7e7
.pf-c-label.pf-m-gold--pf-c-label__icon--Color
#f0ab00