Skip to content
PatternFly logo

Label

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

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

Gold Gold icon Gold removable Gold icon removable Gold link Gold link removable Gold 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

Gold Gold icon Gold removable Gold icon removable Gold link Gold link removable

Compact

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

Overflow

This style of label is used to indicate overflow within a label group.

Editable Beta

Note: Editable label behavior must be handled with JavaScript.

  • .pf-c-label__editable-text onClick event should:
    • Set .pf-m-editable-active on .pf-c-label
    • Change .pf-c-label__editable-textfrom a button to an input
  • 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
    • Change .pf-c-label__editable-text back from an input to a button and set the currvalue of the button to the contents of the input
  • Esc keypress, when content is editable, should:
    • Undo any update to label text
    • Remove .pf-m-editable-active from .pf-c-label
    • Change .pf-c-label__editable-text back to a button

Add label Beta

This style of label is used to add new labels to a label group.

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-c-label__editable-text
<button>, <input>
Initiates editable label text. See the editable example for details about handling behavior in Javascript.
.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-add
.pf-c-label
Modifies label for add 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-gold
.pf-c-label
Modifies the label to have gold 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
#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
.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-cyan--pf-c-label--m-editable__content--before--BorderColor
#a2d9d9
.pf-c-label.pf-m-cyan--pf-c-label--m-editable__content--hover--before--BorderColor
#a2d9d9
.pf-c-label.pf-m-cyan--pf-c-label--m-editable__content--focus--before--BorderColor
#a2d9d9
.pf-c-label.pf-m-gold--pf-c-label--BackgroundColor
#fdf7e7
.pf-c-label.pf-m-gold--pf-c-label__icon--Color
#f0ab00
.pf-c-label.pf-m-gold--pf-c-label__content--Color
#3d2c00
.pf-c-label.pf-m-gold--pf-c-label__content--before--BorderColor
#f9e0a2
.pf-c-label.pf-m-gold--pf-c-label__content--link--hover--before--BorderColor
#f4c145
.pf-c-label.pf-m-gold--pf-c-label__content--link--focus--before--BorderColor
#f4c145
.pf-c-label.pf-m-gold--pf-c-label--m-outline__content--Color
#795600
.pf-c-label.pf-m-gold--pf-c-label--m-outline__content--before--BorderColor
#d2d2d2
.pf-c-label.pf-m-gold--pf-c-label--m-outline__content--link--hover--before--BorderColor
#d2d2d2
.pf-c-label.pf-m-gold--pf-c-label--m-outline__content--link--focus--before--BorderColor
#d2d2d2
.pf-c-label.pf-m-gold--pf-c-label--m-editable__content--before--BorderColor
#f9e0a2
.pf-c-label.pf-m-gold--pf-c-label--m-editable__content--hover--before--BorderColor
#f9e0a2
.pf-c-label.pf-m-gold--pf-c-label--m-editable__content--focus--before--BorderColor
#f9e0a2
.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-outline--pf-c-label--m-editable__content--before--BorderColor
#d2d2d2
.pf-c-label.pf-m-outline--pf-c-label--m-editable__content--hover--before--BorderColor
#d2d2d2
.pf-c-label.pf-m-outline--pf-c-label--m-editable__content--focus--before--BorderColor
#d2d2d2
.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--pf-c-label__content--MaxWidth
16ch
.pf-c-label.pf-m-editable--pf-c-label__content--before--BorderWidth
1px
.pf-c-label.pf-m-editable--pf-c-label__content--before--BorderColor
#d2d2d2
.pf-c-label.pf-m-editable--pf-c-label__content--link--hover--before--BorderWidth
1px
.pf-c-label.pf-m-editable--pf-c-label__content--link--hover--before--BorderColor
#d2d2d2
.pf-c-label.pf-m-editable--pf-c-label__content--link--focus--before--BorderWidth
1px
.pf-c-label.pf-m-editable--pf-c-label__content--link--focus--before--BorderColor
#d2d2d2
.pf-c-label.pf-m-editable--pf-c-label--m-outline__content--link--hover--before--BorderWidth
1px
.pf-c-label.pf-m-editable--pf-c-label--m-outline__content--link--focus--before--BorderWidth
1px
.pf-c-label.pf-m-editable:hover--pf-c-label--m-editable--TextDecorationColor
#151515
.pf-c-label.pf-m-editable:focus--pf-c-label--m-editable--TextDecorationColor
#151515
.pf-c-label.pf-m-editable-active--pf-c-label--m-editable--Cursor
auto
.pf-c-label.pf-m-editable-active--pf-c-label--m-editable--TextDecoration
none
.pf-c-label.pf-m-editable-active--pf-c-label--BackgroundColor
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

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines