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
Editable labels with add button
For additional documentation that showcases adding a new label, see label group demos.
Props
LabelGroup
Name | Type | Default | Description |
---|---|---|---|
addLabelControlBeta | React.ReactNode | Control for adding new labels | |
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
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' | 'gold' | '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 | --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 | ||
.pf-c-label.pf-m-gold | --pf-c-label__content--Color |