Patternfly Logo

Label

Examples

Filled

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

Outline

Grey Grey icon Grey removable Grey icon removable Grey link Grey link removable

Blue Blue icon Blue removable Blue icon removable Blue link Blue link removable

Green Green icon Green removable Green icon removable Green link Green link removable

Orange Orange icon Orange removable Orange icon removable Orange link Orange link removable

Red Red icon Red removable Red icon removable Red link Red link removable

Purple Purple icon Purple removable Purple icon removable Purple link Purple link removable

Cyan Cyan icon Cyan removable Cyan icon removable Cyan link Cyan link removable

Overflow

Documentation

Usage

ClassApplied toOutcome
.pf-c-label<span>, <button>Initiates a label. Without a color modifier, the label's default style is grey. Use a color modifier to change the label color. Use a <button> if the label is an overflow label used in the label group. Required
.pf-c-label__content<span>, <a>, <button>Iniates a label content. Use as an <a> element if the label serves as a link. Use a <button> if the label serves as an action. Required
.pf-c-label__icon<span>Initiates a label icon.
.pf-c-label__text<span>Initiates label text.
.pf-m-outline.pf-c-labelModifies label for outline styles.
.pf-m-overflow.pf-c-labelModifies label for overflow styles for use in a label group.
.pf-m-blue.pf-c-labelModifies the label to have blue colored styling.
.pf-m-green.pf-c-labelModifies the label to have green colored styling.
.pf-m-orange.pf-c-labelModifies the label to have orange colored styling.
.pf-m-red.pf-c-labelModifies the label to have red colored styling.
.pf-m-purple.pf-c-labelModifies the label to have purple colored styling.
.pf-m-cyan.pf-c-labelModifies the label to have cyan colored styling.

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