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 |
---|---|---|---|
addLabelControl | 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 |
editableTextAreaProps | any | Additional props passed to the editable textarea. | |
expandedText | string | 'Show Less' | Customizable "Show Less" text string |
hasEditableTextArea | 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 |
isEditable | 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 | #3d2c00 | ||
.pf-c-label.pf-m-gold | --pf-c-label__content--before--BorderColor | #f9e0a2 | ||
.pf-c-label.pf-m-gold | --pf-c-label__content--link--hover--before--BorderColor | #f4c145 | ||
.pf-c-label.pf-m-gold | --pf-c-label__content--link--focus--before--BorderColor | #f4c145 | ||
.pf-c-label.pf-m-gold | --pf-c-label--m-outline__content--Color | #795600 | ||
.pf-c-label.pf-m-gold | --pf-c-label--m-outline__content--before--BorderColor | #d2d2d2 | ||
.pf-c-label.pf-m-gold | --pf-c-label--m-outline__content--link--hover--before--BorderColor | #d2d2d2 | ||
.pf-c-label.pf-m-gold | --pf-c-label--m-outline__content--link--focus--before--BorderColor | #d2d2d2 | ||
.pf-c-label.pf-m-gold | --pf-c-label--m-editable__content--before--BorderColor | #f9e0a2 | ||
.pf-c-label.pf-m-gold | --pf-c-label--m-editable__content--hover--before--BorderColor | #f9e0a2 | ||
.pf-c-label.pf-m-gold | --pf-c-label--m-editable__content--focus--before--BorderColor | #f9e0a2 | ||
.pf-c-label.pf-m-outline | --pf-c-label__content--Color | #151515 | ||
.pf-c-label.pf-m-outline | --pf-c-label__content--before--BorderWidth | 1px | ||
.pf-c-label.pf-m-outline | --pf-c-label__content--before--BorderColor | #d2d2d2 | ||
.pf-c-label.pf-m-outline | --pf-c-label--BackgroundColor | #fff | ||
.pf-c-label.pf-m-outline | --pf-c-label--m-editable__content--before--BorderColor | #d2d2d2 | ||
.pf-c-label.pf-m-outline | --pf-c-label--m-editable__content--hover--before--BorderColor | #d2d2d2 | ||
.pf-c-label.pf-m-outline | --pf-c-label--m-editable__content--focus--before--BorderColor | #d2d2d2 | ||
.pf-c-label.pf-m-overflow:hover | --pf-c-label__content--before--BorderWidth | 2px | ||
.pf-c-label.pf-m-overflow:hover | --pf-c-label__content--before--BorderColor | #d2d2d2 | ||
.pf-c-label.pf-m-overflow:focus | --pf-c-label__content--before--BorderWidth | 2px | ||
.pf-c-label.pf-m-overflow:focus | --pf-c-label__content--before--BorderColor | #d2d2d2 | ||
.pf-c-label.pf-m-editable | --pf-c-label__content--MaxWidth | 16ch | ||
.pf-c-label.pf-m-editable | --pf-c-label__content--before--BorderWidth | 1px | ||
.pf-c-label.pf-m-editable | --pf-c-label__content--before--BorderColor | #d2d2d2 | ||
.pf-c-label.pf-m-editable | --pf-c-label__content--link--hover--before--BorderWidth | 1px | ||
.pf-c-label.pf-m-editable | --pf-c-label__content--link--hover--before--BorderColor | #d2d2d2 | ||
.pf-c-label.pf-m-editable | --pf-c-label__content--link--focus--before--BorderWidth | 1px | ||
.pf-c-label.pf-m-editable | --pf-c-label__content--link--focus--before--BorderColor | #d2d2d2 | ||
.pf-c-label.pf-m-editable | --pf-c-label--m-outline__content--link--hover--before--BorderWidth | 1px | ||
.pf-c-label.pf-m-editable | --pf-c-label--m-outline__content--link--focus--before--BorderWidth | 1px | ||
.pf-c-label.pf-m-editable:hover | --pf-c-label--m-editable--TextDecorationColor | #151515 | ||
.pf-c-label.pf-m-editable:focus | --pf-c-label--m-editable--TextDecorationColor | #151515 | ||
.pf-c-label.pf-m-editable-active | --pf-c-label--m-editable--Cursor | auto | ||
.pf-c-label.pf-m-editable-active | --pf-c-label--m-editable--TextDecoration | none | ||
.pf-c-label.pf-m-editable-active | --pf-c-label--BackgroundColor | transparent | ||
.pf-c-label .pf-c-button | --pf-c-button--FontSize | 0.75rem | ||
.pf-c-label .pf-c-button | --pf-c-button--PaddingTop | 0.25rem | ||
.pf-c-label .pf-c-button | --pf-c-button--PaddingRight | 0.5rem | ||
.pf-c-label .pf-c-button | --pf-c-button--PaddingBottom | 0.25rem | ||
.pf-c-label .pf-c-button | --pf-c-button--PaddingLeft | 0.5rem | ||
.pf-c-label.pf-m-overflow | --pf-c-label__content--Color | #06c | ||
.pf-c-label.pf-m-overflow | --pf-c-label--BackgroundColor | #fff | ||
.pf-c-label.pf-m-overflow | --pf-c-label__content--before--BorderWidth | 1px | ||
.pf-c-label.pf-m-overflow | --pf-c-label__content--before--BorderColor | #f0f0f0 | ||
.pf-c-label.pf-m-overflow | --pf-c-label__content--link--hover--before--BorderWidth | 2px | ||
.pf-c-label.pf-m-overflow | --pf-c-label__content--link--hover--before--BorderColor | #f0f0f0 | ||
.pf-c-label.pf-m-overflow | --pf-c-label__content--link--focus--before--BorderWidth | 2px | ||
.pf-c-label.pf-m-overflow | --pf-c-label__content--link--focus--before--BorderColor | #f0f0f0 | ||
a.pf-c-label__content:hover | --pf-c-label__content--before--BorderWidth | 2px | ||
a.pf-c-label__content:hover | --pf-c-label__content--before--BorderColor | #8a8d90 | ||
a.pf-c-label__content:focus | --pf-c-label__content--before--BorderWidth | 2px | ||
a.pf-c-label__content:focus | --pf-c-label__content--before--BorderColor | #8a8d90 | ||
View source on GitHub