Patternfly Logo

Examples

Filled

Grey Grey icon Grey removeable Grey icon removeable Grey link Grey link removeableGrey label with icon that overflows

Blue Blue icon Blue removeable Blue icon removeable Blue link Blue link removeableBlue label with icon that overflows

Green Green icon Green removeable Green icon removeable Green link Green link removeableGreen label with icon that overflows

Orange Orange icon Orange removeable Orange icon removeable Orange link Orange link removeableOrange label with icon that overflows

Red Red icon Red removeable Red icon removeable Red link Red link removeableRed label with icon that overflows

Purple Purple icon Purple removeable Purple icon removeable Purple link Purple link removeablePurple label with icon that overflows

Cyan Cyan icon Cyan removeable Cyan icon removeable Cyan link Cyan link removeableCyan label with icon that overflows

Outline

Grey Grey icon Grey removeable Grey icon removeable Grey link Grey link removeableGrey label with icon that overflows

Blue Blue icon Blue removeable Blue icon removeable Blue link Blue link removeableBlue label with icon that overflows

Green Green icon Green removeable Green icon removeable Green link Green link removeableGreen label with icon that overflows

Orange Orange icon Orange removeable Orange icon removeable Orange link Orange link removeableOrange label with icon that overflows

Red Red icon Red removeable Red icon removeable Red link Red link removeableRed label with icon that overflows

Purple Purple icon Purple removeable Purple icon removeable Purple link Purple link removeablePurple label with icon that overflows

Cyan Cyan icon Cyan removeable Cyan icon removeable Cyan link Cyan link removeableCyan label with icon that overflows

Props

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