Info alert:Beta feature
This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.
Examples
Props
LabelGroup
Name | Type | Required | Default | Description |
---|---|---|---|---|
aria-label | string | No | 'Label group category' | Aria label for label group that does not have a category name |
categoryName | string | No | '' | 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 | No | Content rendered inside the label group. Should be <Label> elements. | |
className | string | No | Additional classes added to the label item | |
closeBtnAriaLabel | string | No | 'Close label group' | Aria label for close button |
collapsedText | string | No | '${remaining} more' | Customizeable template string. Use variable "${remaining}" for the overflow label count. |
defaultIsOpen | boolean | No | false | Flag for having the label group default to expanded |
expandedText | string | No | 'Show Less' | Customizable "Show Less" text string |
isClosable | boolean | No | false | Flag if label group can be closed |
isVertical | boolean | No | false | Flag to implement a vertical layout |
numLabels | number | No | 3 | Set number of labels to show before overflow |
onClick | (event: React.MouseEvent) => void | No | (_e: React.MouseEvent) => undefined as any | Function that is called when clicking on the label group close button |
tooltipPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right' | No | 'top' | Position of the tooltip which is displayed if the category name text is longer |
Label
Name | Type | Required | Default | Description |
---|---|---|---|---|
children | React.ReactNode | No | Content rendered inside the label. | |
className | string | No | '' | Additional classes added to the label. |
closeBtn | React.ReactNode | No | Node for custom close button. | |
closeBtnProps | any | No | Additional properties for the default close button. | |
color | 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey' | No | 'grey' | Color of the label. |
href | string | No | Href for a label that is a link. If present, the label will change to an anchor element. | |
icon | React.ReactNode | No | Icon added to the left of the label text. | |
isOverflowLabel | boolean | No | Flag indicating if the label is an overflow label | |
isTruncated | boolean | No | false | Flag indicating the label text should be truncated. |
onClose | (event: React.MouseEvent) => void | No | Close click callback for removable labels. If present, label will have a close button. | |
render | ({ className, content, componentRef }: { className: string; content: React.ReactNode; componentRef: any; }) => React.ReactNode | No | Forwards the label content and className to rendered function. Use this prop for react router support. | |
tooltipPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right' | No | Position of the tooltip which is displayed if text is truncated | |
variant | 'outline' | 'filled' | No | '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 | #fdf7e7 | |
.pf-c-label | --pf-c-label--m-orange__icon--Color | #ec7a08 | |
.pf-c-label | --pf-c-label--m-orange__content--Color | #3d2c00 | |
.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-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__content--Color | #151515 | |
.pf-c-label | --pf-c-label--m-outline__content--Color | #151515 | |
.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-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-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-orange | --pf-c-label--BackgroundColor | #fdf7e7 | |
.pf-c-label.pf-m-orange | --pf-c-label__icon--Color | #ec7a08 | |
.pf-c-label.pf-m-orange | --pf-c-label__content--Color | #3d2c00 | |
.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-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-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-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-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-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-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