Examples
Filled
GreyGrey icon Grey removable Grey icon removable Grey link Grey link removable Grey label with icon that overflows
Blue Blue icon Blue removable Blue icon removable Blue link Blue link removable Blue label with icon that overflows
Green Green icon Green removable Green icon removable Green link Green link removable Green label with icon that overflows
Orange Orange icon Orange removable Orange icon removable Orange link Orange link removable Orange label with icon that overflows
Red Red icon Red removable Red icon removable Red link Red link removable Red label with icon that overflows
Purple Purple icon Purple removable Purple icon removable Purple link Purple link removable Purple label with icon that overflows
Cyan Cyan icon Cyan removable Cyan icon removable Cyan link Cyan link removable Cyan label with icon that overflows
Gold Gold icon Gold removable Gold icon removable Gold link Gold link removable Gold label with icon that overflows
Blue Blue icon Blue removable Blue icon removable Blue link Blue link removable Blue label with icon that overflows
Green Green icon Green removable Green icon removable Green link Green link removable Green label with icon that overflows
Orange Orange icon Orange removable Orange icon removable Orange link Orange link removable Orange label with icon that overflows
Red Red icon Red removable Red icon removable Red link Red link removable Red label with icon that overflows
Purple Purple icon Purple removable Purple icon removable Purple link Purple link removable Purple label with icon that overflows
Cyan Cyan icon Cyan removable Cyan icon removable Cyan link Cyan link removable Cyan label with icon that overflows
Gold Gold icon Gold removable Gold icon removable Gold link Gold link removable Gold label with icon that overflows
Outline
Grey Grey icon Grey removable Grey icon removable Grey link Grey link removable Grey label with icon that overflows
Blue Blue icon Blue removable Blue icon removable Blue link Blue link removable Blue label with icon that overflows
Green Green icon Green removable Green icon removable Green link Green link removable Green label with icon that overflows
Orange Orange icon Orange removable Orange icon removable Orange link Orange link removable Orange label with icon that overflows
Red Red icon Red removable Red icon removable Red link Red link removable Red label with icon that overflows
Purple Purple icon Purple removable Purple icon removable Purple link Purple link removable Purple label with icon that overflows
Cyan Cyan icon Cyan removable Cyan icon removable Cyan link Cyan link removable Cyan label with icon that overflows
Gold Gold icon Gold removable Gold icon removable Gold link Gold link removable Gold label with icon that overflows
Blue Blue icon Blue removable Blue icon removable Blue link Blue link removable Blue label with icon that overflows
Green Green icon Green removable Green icon removable Green link Green link removable Green label with icon that overflows
Orange Orange icon Orange removable Orange icon removable Orange link Orange link removable Orange label with icon that overflows
Red Red icon Red removable Red icon removable Red link Red link removable Red label with icon that overflows
Purple Purple icon Purple removable Purple icon removable Purple link Purple link removable Purple label with icon that overflows
Cyan Cyan icon Cyan removable Cyan icon removable Cyan link Cyan link removable Cyan label with icon that overflows
Gold Gold icon Gold removable Gold icon removable Gold link Gold link removable Gold label with icon that overflows
Compact
Grey Compact icon Compact removable Compact icon removable Compact link Compact link removable Compact label with icon that overflows
Editable Beta
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.
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. | |
| 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
