Examples
Filled labels
GreyGrey icon Grey removable Grey icon removable Grey link Grey link removable Grey label with icon that overflows Grey link removable (disabled)
Blue Blue icon Blue removable Blue icon removable Blue link Blue link removable Blue label with icon that overflows Blue link removable (disabled)
Green Green icon Green removable Green icon removable Green link Green link removable Green label with icon that overflows Green link removable (disabled)
Orange Orange icon Orange removable Orange icon removable Orange link Orange link removable Orange label with icon that overflows Orange link removable (disabled)
Red Red icon Red removable Red icon removable Red link Red link removable Red label with icon that overflows Red link removable (disabled)
Purple Purple icon Purple removable Purple icon removable Purple link Purple link removable Purple label with icon that overflows Purple link removable (disabled)
Cyan Cyan icon Cyan removable Cyan icon removable Cyan link Cyan link removable Cyan label with icon that overflows Cyan link removable (disabled)
Gold Gold icon Gold removable Gold icon removable Gold link Gold link removable Gold label with icon that overflows Gold link removable (disabled)
Blue Blue icon Blue removable Blue icon removable Blue link Blue link removable Blue label with icon that overflows Blue link removable (disabled)
Green Green icon Green removable Green icon removable Green link Green link removable Green label with icon that overflows Green link removable (disabled)
Orange Orange icon Orange removable Orange icon removable Orange link Orange link removable Orange label with icon that overflows Orange link removable (disabled)
Red Red icon Red removable Red icon removable Red link Red link removable Red label with icon that overflows Red link removable (disabled)
Purple Purple icon Purple removable Purple icon removable Purple link Purple link removable Purple label with icon that overflows Purple link removable (disabled)
Cyan Cyan icon Cyan removable Cyan icon removable Cyan link Cyan link removable Cyan label with icon that overflows Cyan link removable (disabled)
Gold Gold icon Gold removable Gold icon removable Gold link Gold link removable Gold label with icon that overflows Gold link removable (disabled)
Label that overflows its parent, but has no textMaxWidth on its own
Outlined labels
Grey Grey icon Grey removable Grey icon removable Grey link Grey link removable Grey label with icon that overflows Grey link removable (disabled)
Blue Blue icon Blue removable Blue icon removable Blue link Blue link removable Blue label with icon that overflows Blue link removable (disabled)
Green Green icon Green removable Green icon removable Green link Green link removable Green label with icon that overflows Green link removable (disabled)
Orange Orange icon Orange removable Orange icon removable Orange link Orange link removable Orange label with icon that overflows Orange link removable (disabled)
Red Red icon Red removable Red icon removable Red link Red link removable Red label with icon that overflows Red link removable (disabled)
Purple Purple icon Purple removable Purple icon removable Purple link Purple link removable Purple label with icon that overflows Purple link removable (disabled)
Cyan Cyan icon Cyan removable Cyan icon removable Cyan link Cyan link removable Cyan label with icon that overflows Cyan link removable (disabled)
Gold Gold icon Gold removable Gold icon removable Gold link Gold link removable Gold label with icon that overflows Gold link removable (disabled)
Blue Blue icon Blue removable Blue icon removable Blue link Blue link removable Blue label with icon that overflows Blue link removable (disabled)
Green Green icon Green removable Green icon removable Green link Green link removable Green label with icon that overflows Green link removable (disabled)
Orange Orange icon Orange removable Orange icon removable Orange link Orange link removable Orange label with icon that overflows Orange link removable (disabled)
Red Red icon Red removable Red icon removable Red link Red link removable Red label with icon that overflows Red link removable (disabled)
Purple Purple icon Purple removable Purple icon removable Purple link Purple link removable Purple label with icon that overflows Purple link removable (disabled)
Cyan Cyan icon Cyan removable Cyan icon removable Cyan link Cyan link removable Cyan label with icon that overflows Cyan link removable (disabled)
Gold Gold icon Gold removable Gold icon removable Gold link Gold link removable Gold label with icon that overflows Gold link removable (disabled)
Compact labels
Grey Compact icon Compact removable Compact icon removable Compact link Compact link removable Compact label with icon that overflows Compact link removable (disabled)
Editable labels
Click or press either enter or space to begin editing a label. After editing, click outside the label or press enter again to complete the edit. To cancel an edit, press escape.
You can also customize any Label's close button aria-label as this example shows with closeBtnAriaLabel.
Basic label group
Use a label group when you have multiple labels to display at once.
- Label 1
- Label 2
- Label 3
Label group with overflow
An overflow label can be added to the end of a group to save space when the number of labels exceeds some threshold. Click the overflow label to expand and collapse the group.
- Label 1
- Label 2
- Label 3
Vertical label group
Labels in a group can also be stacked vertically. This example shows a verical label group with a category name and overflow.
- Label 1
- Label 2
- Label 3
Editable label group with add button
The contents of a label group can be modified by removing labels or adding new ones using the add button. For additional documentation that showcases adding a new label, see label demos.
Props
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. This should not be passed in if the onClick prop is also passed in. | |
| icon | React.ReactNode | Icon added to the left of the label text. | |
| isCompact | boolean | false | Flag indicating the label is compact. |
| isDisabled | boolean | false | Flag indicating the label is disabled. Works only on clickable labels, so either href or onClick props must be passed in. |
| isEditableBeta | boolean | false | Flag indicating the label is editable. |
| isOverflowLabel | boolean | Flag indicating if the label is an overflow label. | |
| onClick | (event: React.MouseEvent) => void | Callback for when the label is clicked. This should not be passed in if the href or isEditable props are also passed in. | |
| onClose | (event: React.MouseEvent) => void | Close click callback for removable labels. If present, label will have a close button. | |
| onEditCancelBeta | (event: KeyboardEvent, previousText: string) => void | Callback when an editable label cancels an edit. | |
| onEditCompleteBeta | (event: MouseEvent | KeyboardEvent, 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. | |
| textMaxWidth | string | The max width of the label before it is truncated. Can be any valid CSS unit, such as '100%', '100px', or '16ch'. | |
| 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. |
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 |
CSS variables
Prefixed with 'pf-v5-c-label'
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-label | --pf-v5-c-label--PaddingTop | 0.25rem | ||
--pf-v5-c-label--PaddingTop --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-label | --pf-v5-c-label--PaddingRight | 0.5rem | ||
--pf-v5-c-label--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-label | --pf-v5-c-label--PaddingBottom | 0.25rem | ||
--pf-v5-c-label--PaddingBottom --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-label | --pf-v5-c-label--PaddingLeft | 0.5rem | ||
--pf-v5-c-label--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-label | --pf-v5-c-label--MaxWidth | 100% | ||
| .pf-v5-c-label | --pf-v5-c-label--BorderRadius | 30em | ||
--pf-v5-c-label--BorderRadius --pf-v5-global--BorderRadius--lg $pf-v5-global--BorderRadius--lg 30em | ||||
| .pf-v5-c-label | --pf-v5-c-label--BackgroundColor | #f5f5f5 | ||
--pf-v5-c-label--BackgroundColor --pf-v5-global--palette--black-150 $pf-v5-color-black-150 #f5f5f5 | ||||
| .pf-v5-c-label | --pf-v5-c-label--Color | #151515 | ||
--pf-v5-c-label--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-label | --pf-v5-c-label--FontSize | 0.875rem | ||
--pf-v5-c-label--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-label | --pf-v5-c-label__content--before--BorderWidth | 1px | ||
--pf-v5-c-label__content--before--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-label | --pf-v5-c-label__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--BackgroundColor | #fff | ||
--pf-v5-c-label--m-outline--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline__content--before--BorderWidth | 1px | ||
--pf-v5-c-label--m-outline__content--before--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label__content--link--hover--before--BorderWidth | 2px | ||
--pf-v5-c-label__content--link--hover--before--BorderWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-label | --pf-v5-c-label__content--link--focus--before--BorderWidth | 2px | ||
--pf-v5-c-label__content--link--focus--before--BorderWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-label | --pf-v5-c-label__content--link--hover--before--BorderColor | #8a8d90 | ||
--pf-v5-c-label__content--link--hover--before--BorderColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-label | --pf-v5-c-label__content--link--focus--before--BorderColor | #8a8d90 | ||
--pf-v5-c-label__content--link--focus--before--BorderColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline__content--link--hover--before--BorderWidth | 2px | ||
--pf-v5-c-label--m-outline__content--link--hover--before--BorderWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline__content--link--focus--before--BorderWidth | 2px | ||
--pf-v5-c-label--m-outline__content--link--focus--before--BorderWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline__content--link--hover--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline__content--link--hover--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline__content--link--focus--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline__content--link--focus--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-blue--BackgroundColor | #e7f1fa | ||
--pf-v5-c-label--m-blue--BackgroundColor --pf-v5-global--palette--blue-50 $pf-v5-color-blue-50 #e7f1fa | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-blue__icon--Color | #06c | ||
--pf-v5-c-label--m-blue__icon--Color --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-blue__content--Color | #002952 | ||
--pf-v5-c-label--m-blue__content--Color --pf-v5-global--info-color--200 $pf-v5-global--info-color--200 $pf-v5-color-blue-600 #002952 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-blue__content--before--BorderColor | #bee1f4 | ||
--pf-v5-c-label--m-blue__content--before--BorderColor --pf-v5-global--palette--blue-100 $pf-v5-color-blue-100 #bee1f4 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-blue__content--link--hover--before--BorderColor | #06c | ||
--pf-v5-c-label--m-blue__content--link--hover--before--BorderColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-blue__content--link--focus--before--BorderColor | #06c | ||
--pf-v5-c-label--m-blue__content--link--focus--before--BorderColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-blue__content--Color | #06c | ||
--pf-v5-c-label--m-outline--m-blue__content--Color --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-blue__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-blue__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-blue__content--link--hover--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-blue__content--link--hover--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-blue__content--link--focus--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-blue__content--link--focus--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-green--BackgroundColor | #f3faf2 | ||
--pf-v5-c-label--m-green--BackgroundColor --pf-v5-global--palette--green-50 $pf-v5-color-green-50 #f3faf2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-green__icon--Color | #3e8635 | ||
--pf-v5-c-label--m-green__icon--Color --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-green__content--Color | #1e4f18 | ||
--pf-v5-c-label--m-green__content--Color --pf-v5-global--success-color--200 $pf-v5-global--success-color--200 $pf-v5-color-green-600 #1e4f18 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-green__content--before--BorderColor | #bde5b8 | ||
--pf-v5-c-label--m-green__content--before--BorderColor --pf-v5-global--palette--green-100 $pf-v5-color-green-100 #bde5b8 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-green__content--link--hover--before--BorderColor | #3e8635 | ||
--pf-v5-c-label--m-green__content--link--hover--before--BorderColor --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-green__content--link--focus--before--BorderColor | #3e8635 | ||
--pf-v5-c-label--m-green__content--link--focus--before--BorderColor --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-green__content--Color | #3e8635 | ||
--pf-v5-c-label--m-outline--m-green__content--Color --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-green__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-green__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-green__content--link--hover--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-green__content--link--hover--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-green__content--link--focus--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-green__content--link--focus--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-orange--BackgroundColor | #fff6ec | ||
--pf-v5-c-label--m-orange--BackgroundColor --pf-v5-global--palette--orange-50 $pf-v5-color-orange-50 #fff6ec | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-orange__icon--Color | #ec7a08 | ||
--pf-v5-c-label--m-orange__icon--Color --pf-v5-global--palette--orange-300 $pf-v5-color-orange-300 #ec7a08 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-orange__content--Color | #3b1f00 | ||
--pf-v5-c-label--m-orange__content--Color --pf-v5-global--palette--orange-700 $pf-v5-color-orange-700 #3b1f00 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-orange__content--before--BorderColor | #f4b678 | ||
--pf-v5-c-label--m-orange__content--before--BorderColor --pf-v5-global--palette--orange-100 $pf-v5-color-orange-100 #f4b678 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-orange__content--link--hover--before--BorderColor | #ec7a08 | ||
--pf-v5-c-label--m-orange__content--link--hover--before--BorderColor --pf-v5-global--palette--orange-300 $pf-v5-color-orange-300 #ec7a08 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-orange__content--link--focus--before--BorderColor | #ec7a08 | ||
--pf-v5-c-label--m-orange__content--link--focus--before--BorderColor --pf-v5-global--palette--orange-300 $pf-v5-color-orange-300 #ec7a08 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-orange__content--Color | #8f4700 | ||
--pf-v5-c-label--m-outline--m-orange__content--Color --pf-v5-global--palette--orange-500 $pf-v5-color-orange-500 #8f4700 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-orange__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-orange__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-orange__content--link--hover--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-orange__content--link--hover--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-orange__content--link--focus--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-orange__content--link--focus--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-red--BackgroundColor | #faeae8 | ||
--pf-v5-c-label--m-red--BackgroundColor --pf-v5-global--palette--red-50 $pf-v5-color-red-50 #faeae8 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-red__icon--Color | #c9190b | ||
--pf-v5-c-label--m-red__icon--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-red__content--Color | #7d1007 | ||
--pf-v5-c-label--m-red__content--Color --pf-v5-global--palette--red-300 $pf-v5-color-red-300 #7d1007 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-red__content--before--BorderColor | #c9190b | ||
--pf-v5-c-label--m-red__content--before--BorderColor --pf-v5-global--palette--red-100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-red__content--link--hover--before--BorderColor | #c9190b | ||
--pf-v5-c-label--m-red__content--link--hover--before--BorderColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-red__content--link--focus--before--BorderColor | #c9190b | ||
--pf-v5-c-label--m-red__content--link--focus--before--BorderColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-red__content--Color | #c9190b | ||
--pf-v5-c-label--m-outline--m-red__content--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-red__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-red__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-red__content--link--hover--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-red__content--link--hover--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-red__content--link--focus--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-red__content--link--focus--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-purple--BackgroundColor | #f2f0fc | ||
--pf-v5-c-label--m-purple--BackgroundColor --pf-v5-global--palette--purple-50 $pf-v5-color-purple-50 #f2f0fc | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-purple__icon--Color | #6753ac | ||
--pf-v5-c-label--m-purple__icon--Color --pf-v5-global--palette--purple-500 $pf-v5-color-purple-500 #6753ac | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-purple__content--Color | #1f0066 | ||
--pf-v5-c-label--m-purple__content--Color --pf-v5-global--palette--purple-700 $pf-v5-color-purple-700 #1f0066 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-purple__content--before--BorderColor | #cbc1ff | ||
--pf-v5-c-label--m-purple__content--before--BorderColor --pf-v5-global--palette--purple-100 $pf-v5-color-purple-100 #cbc1ff | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-purple__content--link--hover--before--BorderColor | #6753ac | ||
--pf-v5-c-label--m-purple__content--link--hover--before--BorderColor --pf-v5-global--palette--purple-500 $pf-v5-color-purple-500 #6753ac | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-purple__content--link--focus--before--BorderColor | #6753ac | ||
--pf-v5-c-label--m-purple__content--link--focus--before--BorderColor --pf-v5-global--palette--purple-500 $pf-v5-color-purple-500 #6753ac | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-purple__content--Color | #6753ac | ||
--pf-v5-c-label--m-outline--m-purple__content--Color --pf-v5-global--palette--purple-500 $pf-v5-color-purple-500 #6753ac | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-purple__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-purple__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-purple__content--link--hover--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-purple__content--link--hover--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-purple__content--link--focus--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-purple__content--link--focus--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-cyan--BackgroundColor | #f2f9f9 | ||
--pf-v5-c-label--m-cyan--BackgroundColor --pf-v5-global--palette--cyan-50 $pf-v5-color-cyan-50 #f2f9f9 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-cyan__icon--Color | #009596 | ||
--pf-v5-c-label--m-cyan__icon--Color --pf-v5-global--custom-color--200 $pf-v5-global--custom-color--200 $pf-v5-color-cyan-300 #009596 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-cyan__content--Color | #003737 | ||
--pf-v5-c-label--m-cyan__content--Color --pf-v5-global--custom-color--300 $pf-v5-global--custom-color--300 $pf-v5-color-cyan-500 #003737 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-cyan__content--before--BorderColor | #a2d9d9 | ||
--pf-v5-c-label--m-cyan__content--before--BorderColor --pf-v5-global--palette--cyan-100 $pf-v5-color-cyan-100 #a2d9d9 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-cyan__content--link--hover--before--BorderColor | #009596 | ||
--pf-v5-c-label--m-cyan__content--link--hover--before--BorderColor --pf-v5-global--custom-color--200 $pf-v5-global--custom-color--200 $pf-v5-color-cyan-300 #009596 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-cyan__content--link--focus--before--BorderColor | #009596 | ||
--pf-v5-c-label--m-cyan__content--link--focus--before--BorderColor --pf-v5-global--custom-color--200 $pf-v5-global--custom-color--200 $pf-v5-color-cyan-300 #009596 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-cyan__content--Color | #005f60 | ||
--pf-v5-c-label--m-outline--m-cyan__content--Color --pf-v5-global--palette--cyan-400 $pf-v5-color-cyan-400 #005f60 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-cyan__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-cyan__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-gold--BackgroundColor | #fdf7e7 | ||
--pf-v5-c-label--m-gold--BackgroundColor --pf-v5-global--palette--gold-50 $pf-v5-color-gold-50 #fdf7e7 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-gold__icon--Color | #f0ab00 | ||
--pf-v5-c-label--m-gold__icon--Color --pf-v5-global--palette--gold-400 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-gold__content--Color | #3d2c00 | ||
--pf-v5-c-label--m-gold__content--Color --pf-v5-global--palette--gold-700 $pf-v5-color-gold-700 #3d2c00 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-gold__content--before--BorderColor | #f9e0a2 | ||
--pf-v5-c-label--m-gold__content--before--BorderColor --pf-v5-global--palette--gold-100 $pf-v5-color-gold-100 #f9e0a2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-gold__content--link--hover--before--BorderColor | #f4c145 | ||
--pf-v5-c-label--m-gold__content--link--hover--before--BorderColor --pf-v5-global--palette--gold-300 $pf-v5-color-gold-300 #f4c145 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-gold__content--link--focus--before--BorderColor | #f4c145 | ||
--pf-v5-c-label--m-gold__content--link--focus--before--BorderColor --pf-v5-global--palette--gold-300 $pf-v5-color-gold-300 #f4c145 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-gold__content--Color | #795600 | ||
--pf-v5-c-label--m-outline--m-gold__content--Color --pf-v5-global--palette--gold-600 $pf-v5-color-gold-600 #795600 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-gold__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-gold__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-gold__content--link--hover--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-gold__content--link--hover--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-outline--m-gold__content--link--focus--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-outline--m-gold__content--link--focus--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-overflow__content--Color | #06c | ||
--pf-v5-c-label--m-overflow__content--Color --pf-v5-global--link--Color $pf-v5-global--link--Color $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-overflow__content--BackgroundColor | #fff | ||
--pf-v5-c-label--m-overflow__content--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-overflow__content--before--BorderWidth | 1px | ||
--pf-v5-c-label--m-overflow__content--before--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-overflow__content--before--BorderColor | #f0f0f0 | ||
--pf-v5-c-label--m-overflow__content--before--BorderColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-overflow__content--link--hover--before--BorderWidth | 2px | ||
--pf-v5-c-label--m-overflow__content--link--hover--before--BorderWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-overflow__content--link--hover--before--BorderColor | #f0f0f0 | ||
--pf-v5-c-label--m-overflow__content--link--hover--before--BorderColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-overflow__content--link--focus--before--BorderWidth | 2px | ||
--pf-v5-c-label--m-overflow__content--link--focus--before--BorderWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-overflow__content--link--focus--before--BorderColor | #f0f0f0 | ||
--pf-v5-c-label--m-overflow__content--link--focus--before--BorderColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-compact--PaddingTop | 0 | ||
| .pf-v5-c-label | --pf-v5-c-label--m-compact--PaddingRight | 0.5rem | ||
--pf-v5-c-label--m-compact--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-compact--PaddingBottom | 0 | ||
| .pf-v5-c-label | --pf-v5-c-label--m-compact--PaddingLeft | 0.5rem | ||
--pf-v5-c-label--m-compact--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-compact--FontSize | 0.75rem | ||
--pf-v5-c-label--m-compact--FontSize --pf-v5-global--FontSize--xs $pf-v5-global--FontSize--xs pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-compact--m-editable--TextDecorationOffset | 0.0625rem | ||
| .pf-v5-c-label | --pf-v5-c-label__content--Color | #151515 | ||
--pf-v5-c-label__content--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-label | --pf-v5-c-label__content--BackgroundColor | transparent | ||
| .pf-v5-c-label | --pf-v5-c-label__content--MaxWidth | 100% | ||
| .pf-v5-c-label | --pf-v5-c-label--m-outline__content--Color | #151515 | ||
--pf-v5-c-label--m-outline__content--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-editable__content--MaxWidth | 16ch | ||
| .pf-v5-c-label | --pf-v5-c-label__text--MaxWidth | 100% | ||
| .pf-v5-c-label | --pf-v5-c-label__icon--Color | #151515 | ||
--pf-v5-c-label__icon--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-label | --pf-v5-c-label__icon--MarginRight | 0.25rem | ||
--pf-v5-c-label__icon--MarginRight --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-label | --pf-v5-c-label__actions--FontSize | 0.75rem | ||
--pf-v5-c-label__actions--FontSize --pf-v5-global--FontSize--xs $pf-v5-global--FontSize--xs pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-label | --pf-v5-c-label__actions--MarginRight | calc(0.5rem * -1) | ||
--pf-v5-c-label__actions--MarginRight calc(--pf-v5-c-label__actions--c-button--PaddingRight * -1) calc(--pf-v5-global--spacer--sm * -1) calc($pf-v5-global--spacer--sm * -1) calc(pf-size-prem(8px) * -1) calc(0.5rem * -1) | ||||
| .pf-v5-c-label | --pf-v5-c-label__actions--c-button--FontSize | 0.75rem | ||
--pf-v5-c-label__actions--c-button--FontSize --pf-v5-global--FontSize--xs $pf-v5-global--FontSize--xs pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-label | --pf-v5-c-label__actions--c-button--MarginTop | calc(0.25rem * -1) | ||
--pf-v5-c-label__actions--c-button--MarginTop calc(--pf-v5-c-label__actions--c-button--PaddingTop * -1) calc(--pf-v5-global--spacer--xs * -1) calc($pf-v5-global--spacer--xs * -1) calc(pf-size-prem(4px) * -1) calc(0.25rem * -1) | ||||
| .pf-v5-c-label | --pf-v5-c-label__actions--c-button--MarginBottom | calc(0.25rem * -1) | ||
--pf-v5-c-label__actions--c-button--MarginBottom calc(--pf-v5-c-label__actions--c-button--PaddingBottom * -1) calc(--pf-v5-global--spacer--xs * -1) calc($pf-v5-global--spacer--xs * -1) calc(pf-size-prem(4px) * -1) calc(0.25rem * -1) | ||||
| .pf-v5-c-label | --pf-v5-c-label__actions--c-button--PaddingTop | 0.25rem | ||
--pf-v5-c-label__actions--c-button--PaddingTop --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-label | --pf-v5-c-label__actions--c-button--PaddingRight | 0.5rem | ||
--pf-v5-c-label__actions--c-button--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-label | --pf-v5-c-label__actions--c-button--PaddingBottom | 0.25rem | ||
--pf-v5-c-label__actions--c-button--PaddingBottom --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-label | --pf-v5-c-label__actions--c-button--PaddingLeft | 0.5rem | ||
--pf-v5-c-label__actions--c-button--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-editable--Cursor | pointer | ||
| .pf-v5-c-label | --pf-v5-c-label--m-editable--TextDecoration | underline | ||
| .pf-v5-c-label | --pf-v5-c-label--m-editable--TextDecorationStyle | dashed | ||
| .pf-v5-c-label | --pf-v5-c-label--m-editable--TextDecorationThickness | 1px | ||
--pf-v5-c-label--m-editable--TextDecorationThickness --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-editable--TextDecorationOffset | 0.25rem | ||
| .pf-v5-c-label | --pf-v5-c-label--m-editable--TextDecorationColor | #8a8d90 | ||
--pf-v5-c-label--m-editable--TextDecorationColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-editable--hover--TextDecorationColor | #151515 | ||
--pf-v5-c-label--m-editable--hover--TextDecorationColor --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-editable--focus--TextDecorationColor | #151515 | ||
--pf-v5-c-label--m-editable--focus--TextDecorationColor --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-editable__content--before--BorderWidth | 1px | ||
--pf-v5-c-label--m-editable__content--before--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-editable__content--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-editable__content--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-editable__content--hover--before--BorderWidth | 1px | ||
--pf-v5-c-label--m-editable__content--hover--before--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-editable__content--hover--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-editable__content--hover--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-editable__content--focus--before--BorderWidth | 1px | ||
--pf-v5-c-label--m-editable__content--focus--before--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-editable__content--focus--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-label--m-editable__content--focus--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-editable--m-editable-active--Cursor | auto | ||
| .pf-v5-c-label | --pf-v5-c-label--m-editable--m-editable-active--TextDecoration | none | ||
| .pf-v5-c-label | --pf-v5-c-label--m-editable--m-editable-active--BackgroundColor | transparent | ||
| .pf-v5-c-label | --pf-v5-c-label--m-editable--m-editable-active__content--before--BorderWidth | 0 | ||
| .pf-v5-c-label | --pf-v5-c-label--m-editable--m-editable-active__content--before--BorderColor | transparent | ||
| .pf-v5-c-label | --pf-v5-c-label--m-disabled--BackgroundColor | #d2d2d2 | ||
--pf-v5-c-label--m-disabled--BackgroundColor --pf-v5-global--disabled-color--200 $pf-v5-global--disabled-color--200 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-disabled__content--Color | #6a6e73 | ||
--pf-v5-c-label--m-disabled__content--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-label | --pf-v5-c-label--m-disabled__icon--Color | #6a6e73 | ||
--pf-v5-c-label--m-disabled__icon--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-label | --pf-v5-c-label--c-button--m-disabled--Color | #6a6e73 | ||
--pf-v5-c-label--c-button--m-disabled--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-label.pf-m-compact | --pf-v5-c-label--PaddingTop | 0 | ||
--pf-v5-c-label--PaddingTop --pf-v5-c-label--m-compact--PaddingTop 0 | ||||
| .pf-v5-c-label.pf-m-compact | --pf-v5-c-label--PaddingRight | 0.5rem | ||
--pf-v5-c-label--PaddingRight --pf-v5-c-label--m-compact--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-label.pf-m-compact | --pf-v5-c-label--PaddingBottom | 0 | ||
--pf-v5-c-label--PaddingBottom | ||||