Patternfly Logo

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

Basic

  • Label 1
  • Label 2
  • Label 3

Overflow

  • Label 1
  • Label 2
  • Label 3

Category

  • Label 1
  • Label 2
  • Label 3

Category removable

  • Label one
  • Label two
  • Label three

Vertical category overflow removable

  • Label one
  • Label two
  • Label three

Props

LabelGroup properties
NameTypeRequiredDefaultDescription
aria-labelstringNo'Label group category'Aria label for label group that does not have a category name
categoryNamestringNo''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.ReactNodeNoContent rendered inside the label group. Should be <Label> elements.
classNamestringNoAdditional classes added to the label item
closeBtnAriaLabelstringNo'Close label group'Aria label for close button
collapsedTextstringNo'${remaining} more'Customizeable template string. Use variable "${remaining}" for the overflow label count.
defaultIsOpenbooleanNofalseFlag for having the label group default to expanded
expandedTextstringNo'Show Less'Customizable "Show Less" text string
isClosablebooleanNofalseFlag if label group can be closed
isVerticalbooleanNofalseFlag to implement a vertical layout
numLabelsnumberNo3Set number of labels to show before overflow
onClick(event: React.MouseEvent) => voidNo(_e: React.MouseEvent) => undefined as anyFunction 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 properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoContent rendered inside the label.
classNamestringNo''Additional classes added to the label.
closeBtnReact.ReactNodeNoNode for custom close button.
closeBtnPropsanyNoAdditional properties for the default close button.
color'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey'No'grey'Color of the label.
hrefstringNoHref for a label that is a link. If present, the label will change to an anchor element.
iconReact.ReactNodeNoIcon added to the left of the label text.
isOverflowLabelbooleanNoFlag indicating if the label is an overflow label
isTruncatedbooleanNofalseFlag indicating the label text should be truncated.
onClose(event: React.MouseEvent) => voidNoClose click callback for removable labels. If present, label will have a close button.
render({ className, content }: { className: string; content: React.ReactNode }) => React.ReactNodeNoForwards the label content and className to rendered function. Use this prop for react router support.
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
#f0f0f0
.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
0
.pf-c-label--pf-c-label__content--before--BorderColor
transparent
.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
1px
.pf-c-label--pf-c-label__content--link--focus--before--BorderWidth
1px
.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__content--Color
#002952
.pf-c-label--pf-c-label--m-blue__icon--Color
#06c
.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--before--BorderColor
#bee1f4
.pf-c-label--pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor
#bee1f4
.pf-c-label--pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor
#bee1f4
.pf-c-label--pf-c-label--m-green--BackgroundColor
#f3faf2
.pf-c-label--pf-c-label--m-green__content--Color
#1e4f18
.pf-c-label--pf-c-label--m-green__icon--Color
#3e8635
.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--before--BorderColor
#bde5b8
.pf-c-label--pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor
#bde5b8
.pf-c-label--pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor
#bde5b8
.pf-c-label--pf-c-label--m-orange--BackgroundColor
#fdf7e7
.pf-c-label--pf-c-label--m-orange__content--Color
#3d2c00
.pf-c-label--pf-c-label--m-orange__icon--Color
#ec7a08
.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--before--BorderColor
#f9e0a2
.pf-c-label--pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor
#f9e0a2
.pf-c-label--pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor
#f9e0a2
.pf-c-label--pf-c-label--m-red--BackgroundColor
#faeae8
.pf-c-label--pf-c-label--m-red__content--Color
#7d1007
.pf-c-label--pf-c-label--m-red__icon--Color
#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--before--BorderColor
#c9190b
.pf-c-label--pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor
#c9190b
.pf-c-label--pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor
#c9190b
.pf-c-label--pf-c-label--m-purple--BackgroundColor
#f2f0fc
.pf-c-label--pf-c-label--m-purple__content--Color
#1f0066
.pf-c-label--pf-c-label--m-purple__icon--Color
#6753ac
.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--before--BorderColor
#cbc1ff
.pf-c-label--pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor
#cbc1ff
.pf-c-label--pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor
#cbc1ff
.pf-c-label--pf-c-label--m-cyan--BackgroundColor
#f2f9f9
.pf-c-label--pf-c-label--m-cyan__content--Color
#003737
.pf-c-label--pf-c-label--m-cyan__icon--Color
#009596
.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--before--BorderColor
#a2d9d9
.pf-c-label--pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor
#a2d9d9
.pf-c-label--pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor
#a2d9d9
.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__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__content--Color
#002952
.pf-c-label.pf-m-blue--pf-c-label__icon--Color
#06c
.pf-c-label.pf-m-blue--pf-c-label--m-outline__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--link--hover--before--BorderColor
#bee1f4
.pf-c-label.pf-m-blue--pf-c-label--m-outline__content--link--focus--before--BorderColor
#bee1f4
.pf-c-label.pf-m-green--pf-c-label--BackgroundColor
#f3faf2
.pf-c-label.pf-m-green--pf-c-label__content--Color
#1e4f18
.pf-c-label.pf-m-green--pf-c-label__icon--Color
#3e8635
.pf-c-label.pf-m-green--pf-c-label--m-outline__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--link--hover--before--BorderColor
#bde5b8
.pf-c-label.pf-m-green--pf-c-label--m-outline__content--link--focus--before--BorderColor
#bde5b8
.pf-c-label.pf-m-orange--pf-c-label--BackgroundColor
#fdf7e7
.pf-c-label.pf-m-orange--pf-c-label__content--Color
#3d2c00
.pf-c-label.pf-m-orange--pf-c-label__icon--Color
#ec7a08
.pf-c-label.pf-m-orange--pf-c-label--m-outline__content--before--BorderColor
#f9e0a2
.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--link--hover--before--BorderColor
#f9e0a2
.pf-c-label.pf-m-orange--pf-c-label--m-outline__content--link--focus--before--BorderColor
#f9e0a2
.pf-c-label.pf-m-red--pf-c-label--BackgroundColor
#faeae8
.pf-c-label.pf-m-red--pf-c-label__content--Color
#7d1007
.pf-c-label.pf-m-red--pf-c-label__icon--Color
#c9190b
.pf-c-label.pf-m-red--pf-c-label--m-outline__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--link--hover--before--BorderColor
#c9190b
.pf-c-label.pf-m-red--pf-c-label--m-outline__content--link--focus--before--BorderColor
#c9190b
.pf-c-label.pf-m-purple--pf-c-label--BackgroundColor
#f2f0fc
.pf-c-label.pf-m-purple--pf-c-label__content--Color
#1f0066
.pf-c-label.pf-m-purple--pf-c-label__icon--Color
#6753ac
.pf-c-label.pf-m-purple--pf-c-label--m-outline__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--link--hover--before--BorderColor
#cbc1ff
.pf-c-label.pf-m-purple--pf-c-label--m-outline__content--link--focus--before--BorderColor
#cbc1ff
.pf-c-label.pf-m-cyan--pf-c-label--BackgroundColor
#f2f9f9
.pf-c-label.pf-m-cyan--pf-c-label__content--Color
#003737
.pf-c-label.pf-m-cyan--pf-c-label__icon--Color
#009596
.pf-c-label.pf-m-cyan--pf-c-label--m-outline__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--link--hover--before--BorderColor
#a2d9d9
.pf-c-label.pf-m-cyan--pf-c-label--m-outline__content--link--focus--before--BorderColor
#a2d9d9
.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
1px
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
1px
a.pf-c-label__content:focus--pf-c-label__content--before--BorderColor
#8a8d90

View source on GitHub