Skip to content
Patternfly Logo

Label

Examples

Filled

Grey Grey icon Grey removable Grey icon removable Grey link Grey link removable Grey label with icon that truncates

Blue Blue icon Blue removable Blue icon removable Blue link Blue link removable Blue label with icon that truncates

Green Green icon Green removable Green icon removable Green link Green link removable Green label with icon that truncates

Orange Orange icon Orange removable Orange icon removable Orange link Orange link removable Orange label with icon that truncates

Red Red icon Red removable Red icon removable Red link Red link removable Red label with icon that truncates

Purple Purple icon Purple removable Purple icon removable Purple link Purple link removable Purple label with icon that truncates

Cyan Cyan icon Cyan removable Cyan icon removable Cyan link Cyan link removable Cyan label with icon that truncates

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

Compact

Compact Compact icon Compact removable Compact icon removable Compact link Compact link removable Compact label with icon that truncates

Overflow

Editable label behavior must be handled with JavaScript.

  • .pf-c-inline-edit__editable-text onClick event should:
    • Set .pf-m-editable-active on .pf-c-label
    • Set contenteditable="true" on .pf-c-inline-edit__editable-text
  • Return keypress, when content is editable, should:
    • Be captured to prevent line wrapping and save updates to label text
    • Remove .pf-m-editable-active from .pf-c-label
    • Remove contenteditable="true" from .pf-c-inline-edit__editable-text
  • Esc keypress, when content is editable, should:
    • Undo any update to label text
    • Remove .pf-m-editable-active from .pf-c-label
    • Remove contenteditable="true" from .pf-c-inline-edit__editable-text

Editable

Editable label
Editable active

Documentation

Usage

Class
Applied to
Outcome
.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-label
Modifies label for outline styles.
.pf-m-compact
.pf-c-label
Modifies label for compact styles.
.pf-m-overflow
.pf-c-label
Modifies label for overflow styles for use in a label group.
.pf-m-blue
.pf-c-label
Modifies the label to have blue colored styling.
.pf-m-green
.pf-c-label
Modifies the label to have green colored styling.
.pf-m-orange
.pf-c-label
Modifies the label to have orange colored styling.
.pf-m-red
.pf-c-label
Modifies the label to have red colored styling.
.pf-m-purple
.pf-c-label
Modifies the label to have purple colored styling.
.pf-m-cyan
.pf-c-label
Modifies the label to have cyan colored styling.
.pf-m-editable
.pf-c-label
Modifies label for editable styles.
.pf-m-editable-active
.pf-c-label.pf-m-editable
Modifies editable label for active styles.

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