Skip to content
PatternFly logo

Label

The label component allows users to add specific element captions for user clarity and convenience.

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

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

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

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the label.
classNamestring''Additional classes added to the label.
closeBtnReact.ReactNodeNode for custom close button.
closeBtnAriaLabelstringAria label for close button
closeBtnPropsanyAdditional properties for the default close button.
color'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey' | 'gold''grey'Color of the label.
editablePropsBetaanyAdditional 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.
isCompactbooleanfalseFlag indicating the label is compact.
isEditableBetabooleanfalseFlag 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.
onEditCancelBeta(event: KeyboardEvent, previousText: string) => voidCallback when an editable label cancels an edit.
onEditCompleteBeta(event: MouseEvent | KeyboardEvent, 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.
tooltipPositionTooltipPosition | '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