Skip to content
Patternfly Logo

Label group

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.

Examples

Basic

  • Label 1
  • Label 2
  • Label 3

Overflow

  • Label 1
  • Label 2
  • Label 3

Category

  • Label 1
  • Label 2
  • Label 3

Category removable

  • Label 1
  • Label 2
  • Label 3

Vertical category overflow removable

  • Label 1
  • Label 2
  • Label 3

Editable labels

  • Editable label
  • Static label
  • Editable label 2
  • Editable label 3

Props

LabelGroup

*required
NameTypeDefaultDescription
aria-labelstring'Label group category'Aria label for label group that does not have a category name
categoryNamestring''Category name text for the label group category. If this prop is supplied the label group with have a label and category styling applied
childrenReact.ReactNodeContent rendered inside the label group. Should be <Label> elements.
classNamestringAdditional classes added to the label item
closeBtnAriaLabelstring'Close label group'Aria label for close button
collapsedTextstring'${remaining} more'Customizeable template string. Use variable "${remaining}" for the overflow label count.
defaultIsOpenbooleanfalseFlag for having the label group default to expanded
editableTextAreaPropsanyAdditional props passed to the editable textarea.
expandedTextstring'Show Less'Customizable "Show Less" text string
hasEditableTextAreabooleanfalseFlag indicating the editable label group should be appended with a textarea.
isClosablebooleanfalseFlag if label group can be closed
isEditablebooleanfalseFlag indicating contained labels are editable. Allows spacing for a text input after the labels.
isVerticalbooleanfalseFlag to implement a vertical layout
numLabelsnumber3Set number of labels to show before overflow
onClick(event: React.MouseEvent) => void(_e: React.MouseEvent) => undefined as anyFunction that is called when clicking on the label group close button
tooltipPosition'auto' | 'top' | 'bottom' | 'left' | 'right''top'Position of the tooltip which is displayed if the category name text is longer

Label

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the label.
classNamestring''Additional classes added to the label.
closeBtnReact.ReactNodeNode for custom close button.
closeBtnPropsanyAdditional properties for the default close button.
color'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey''grey'Color of the label.
editablePropsanyAdditional props passed to the editable label text div. Optionally passing onInput and onBlur callbacks will allow finer custom text input control.
hrefstringHref for a label that is a link. If present, the label will change to an anchor element.
iconReact.ReactNodeIcon added to the left of the label text.
isEditablebooleanfalseFlag indicating the label is editable.
isOverflowLabelbooleanFlag indicating if the label is an overflow label
isTruncatedbooleanfalseFlag indicating the label text should be truncated.
onClose(event: React.MouseEvent) => voidClose click callback for removable labels. If present, label will have a close button.
onEditCancel(previousText: string) => voidCallback when an editable label cancels an edit.
onEditComplete(newText: string) => voidCallback when an editable label completes an edit.
render({ className, content, componentRef }: { className: string; content: React.ReactNode; componentRef: any; }) => React.ReactNodeForwards the label content and className to rendered function. Use this prop for react router support.
tooltipPosition'auto' | 'top' | 'bottom' | 'left' | 'right'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
#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--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__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-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-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-m-editable-active--pf-c-label--BackgroundColor
transparent
.pf-c-label.pf-m-editable-active--pf-c-label__content--before--BorderWidth
0
.pf-c-label.pf-m-editable-active--pf-c-label__content--before--BorderColor
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