Skip to content
PatternFly

Label

Examples

Filled

Grey Grey icon Grey removable Grey icon removable Grey link Grey link removable Grey label, max-width truncation customization Grey label with icon and set max-width truncation customization Grey link removable (disabled)

Blue Blue icon Blue removable Blue icon removable Blue link Blue link removable Blue label, max-width truncation customization Blue label with icon and set max-width truncation customization Blue link removable (disabled)

Green Green icon Green removable Green icon removable Green link Green link removable Green label, max-width truncation customization Green label with icon and set max-width truncation customization Green link removable (disabled)

Orange Orange icon Orange removable Orange icon removable Orange link Orange link removable Orange label, max-width truncation customization Orange label with icon and set max-width truncation customization Orange link removable (disabled)

Red Red icon Red removable Red icon removable Red link Red link removable Red label, max-width truncation customization Red label with icon and set max-width truncation customization Red link removable (disabled)

Purple Purple icon Purple removable Purple icon removable Purple link Purple link removable Purple label, max-width truncation customization Purple label with icon and set max-width truncation customization Purple link removable (disabled)

Cyan Cyan icon Cyan removable Cyan icon removable Cyan link Cyan link removable Cyan label, max-width truncation customization Cyan label with icon and set max-width truncation customization Cyan link removable (disabled)

Gold Gold icon Gold removable Gold icon removable Gold link Gold link removable Gold label, max-width truncation customization Gold label with icon and set max-width truncation customization Gold link removable (disabled)

Outline

Grey Grey icon Grey removable Grey icon removable Grey link Grey link removable Grey label, max-width truncation customization Grey label with icon and set max-width truncation customization Grey link removable (disabled)

Blue Blue icon Blue removable Blue icon removable Blue link Blue link removable Blue label, max-width truncation customization Blue label with icon and set max-width truncation customization Blue link removable (disabled)

Green Green icon Green removable Green icon removable Green link Green link removable Green label, max-width truncation customization Green label with icon and set max-width truncation customization Green link removable (disabled)

Orange Orange icon Orange removable Orange icon removable Orange link Orange link removable Orange label, max-width truncation customization Orange label with icon and set max-width truncation customization Orange link removable (disabled)

Red Red icon Red removable Red icon removable Red link Red link removable Red label, max-width truncation customization Red label with icon and set max-width truncation customization Red link removable (disabled)

Purple Purple icon Purple removable Purple icon removable Purple link Purple link removable Purple label, max-width truncation customization Purple label with icon and set max-width truncation customization Purple link removable (disabled)

Cyan Cyan icon Cyan removable Cyan icon removable Cyan link Cyan link removable Cyan label, max-width truncation customization Cyan label with icon and set max-width truncation customization Cyan link removable (disabled)

Gold Gold icon Gold removable Gold icon removable Gold link Gold link removable Gold label, max-width truncation customization Gold label with icon and set max-width truncation customization Gold link removable (disabled)

Compact

Compact Compact icon Compact removable Compact icon removable Compact link Compact link removable Compact label, max-width truncation customization Compact label with icon and set max-width truncation customization Compact link removable (disabled)

Overflow

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

Editable

Note: Editable label behavior must be handled with JavaScript.

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

Add label

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

Basic label group

Use a label group to display multiple labels at once.

  • Label 1
  • Label 2
  • Label 3

Label group with overflow

  • Label 1
  • Label 2
  • Label 3

Label group with overflow expanded

  • Label 1
  • Label 2
  • Label 3
  • Label 4
  • Label 5

Editable label group with add button

The contents of a label group can be modified by removing labels or adding new ones using the Add button.

  • Label 1
  • Label 2
  • Label 3

Label group with category label

  • Label 1
  • Label 2
  • Label 3

Label group with removable categories

  • Label 1
  • Label 2
  • Label 3
  • Label 4
  • Label 5
  • Label 6

Vertical label group

  • Label 1
  • Label 2
  • Label 3

Vertical label group with overflow

  • Label 1
  • Label 2
  • Label 3

Vertical label group with overflow expanded

  • Label 1
  • Label 2
  • Label 3
  • Label 4
  • Label 5

Vertical label group with category

  • Label 1
  • Label 2
  • Label 3

Vertical label group with removable category

  • Label 1
  • Label 2
  • Label 3

In addition to the JavaScript management of editable labels, dynamic label groups also need:

  • .pf-v5-c-label-group.pf-m-editable onClick event should (excluding labels within) set focus on .pf-v5-c-label-group__textarea

Editable labels, dynamic label group

Editable labels, label active, dynamic label group

Static labels, dynamic label group

  • Static label 1
  • Static label 2
  • Static label 3

Mixed labels (static / editable), dynamic label group

  • Static label 1
  • Static label 2

Label group with compact labels

  • Label 1
  • Label 2
  • Label 3

Label group with compact labels and overflow

  • Label 1
  • Label 2
  • Label 3

Vertical label group with compact labels

  • Label 1
  • Label 2
  • Label 3

Documentation

Label usage

Class
Applied to
Outcome
.pf-v5-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-v5-c-label__content
<span>, <a>, <button>
Creates a content wrapper. Use as an <a> element if the label serves as a link. Use a <button> if the label serves as an action. Required
.pf-v5-c-label__icon
<span>
Initiates a label icon.
.pf-v5-c-label__text
<span>
Initiates label text. Required
.pf-v5-c-label__editable-text
<button>, <input>
Initiates editable label text. See the editable example for details about handling behavior in Javascript.
.pf-v5-c-label__actions
<span>
Creates a wrapper for label actions. Required for removable labels
.pf-m-outline
.pf-v5-c-label
Modifies label for outline styles.
.pf-m-compact
.pf-v5-c-label
Modifies label for compact styles.
.pf-m-overflow
.pf-v5-c-label
Modifies label for overflow styles for use in a label group.
.pf-m-add
.pf-v5-c-label
Modifies label for add styles for use in a label group.
.pf-m-blue
.pf-v5-c-label
Modifies the label to have blue colored styling.
.pf-m-green
.pf-v5-c-label
Modifies the label to have green colored styling.
.pf-m-orange
.pf-v5-c-label
Modifies the label to have orange colored styling.
.pf-m-red
.pf-v5-c-label
Modifies the label to have red colored styling.
.pf-m-purple
.pf-v5-c-label
Modifies the label to have purple colored styling.
.pf-m-cyan
.pf-v5-c-label
Modifies the label to have cyan colored styling.
.pf-m-gold
.pf-v5-c-label
Modifies the label to have gold colored styling.
.pf-m-editable
.pf-v5-c-label
Modifies label for editable styles.
.pf-m-editable-active
.pf-v5-c-label.pf-m-editable
Modifies editable label for active styles.
.pf-m-disabled
.pf-v5-c-label
Modifies label for disabled styles.
--pf-v5-c-label__text--MaxWidth
.pf-v5-c-label
Modifiex the max width of the text before text will truncate.

Label group accessibility

Attribute
Applied to
Outcome
role="list"
.pf-v5-c-label-group__list
Indicates that the label group list is a list element. This role is redundant since .pf-v5-c-label-group__list is a <ul> but is required for screen readers to announce the list properly. Required
aria-label="[button label text]"
.pf-v5-c-label-group__close > button
Provides an accessible name for a label group close button when an icon is used instead of text. Required when an icon is used with no supporting text. Required
aria-labelledby="[id value of .pf-v5-c-label-group__close > button] [id value of .pf-v5-c-label-group__label]"
.pf-v5-c-label-group__close > button
Provides an accessible name for the button. Required
aria-label="[label text]"
.pf-v5-c-label-group__textarea
Provides an accessible name for the textarea. Required
row="1"
.pf-v5-c-label-group__textarea
Indicates that the label group textarea is one row. Required
tabindex="0"
.pf-v5-c-label-group__textarea
Inserts the label group textarea into the tab order of the page so that it is focusable. Required

Label group usage

Class
Applied to
Outcome
.pf-v5-c-label-group
<div>
Initiates the label group component. Required.
.pf-v5-c-label-group__list
<ul>
Initiates the container for a list of labels. Required.
.pf-v5-c-label-group__list-item
<li>
Initiates the list item inside of the label group. Required.
.pf-v5-c-label-group__main
<div>
Initiates the main element in the label group. Required when label and list are present
.pf-v5-c-label-group__textarea
<textarea>
Initiates the textarea element in the label group. Required when label group is editable
.pf-v5-c-label-group__label
<span>
Initiates the label to be used in the label group.
.pf-v5-c-label-group__close
<div>
Initiates the container used for the button to remove the label group.
.pf-v5-c-button
.pf-v5-c-label-group__close <button>
Initiates the button used to remove the label group.
.pf-m-editable
.pf-v5-c-label-group
Modifies the label group to support editable styling.
.pf-m-category
.pf-v5-c-label-group
Modifies the label group to support category styling.
.pf-m-textarea
.pf-v5-c-label-group__list-item
Modifies the label group list item to support textarea.

CSS variables

Prefixed with 'pf-v5-c-label'

Expand or collapse columnSelectorVariableValue
.pf-v5-c-label--pf-v5-c-label--PaddingTop
0.25rem
.pf-v5-c-label--pf-v5-c-label--PaddingRight
0.5rem
.pf-v5-c-label--pf-v5-c-label--PaddingBottom
0.25rem
.pf-v5-c-label--pf-v5-c-label--PaddingLeft
0.5rem
.pf-v5-c-label--pf-v5-c-label--MaxWidth
100%
.pf-v5-c-label--pf-v5-c-label--BorderRadius
30em
.pf-v5-c-label--pf-v5-c-label--BackgroundColor
#f5f5f5
.pf-v5-c-label--pf-v5-c-label--Color
#151515
.pf-v5-c-label--pf-v5-c-label--FontSize
0.875rem
.pf-v5-c-label--pf-v5-c-label__content--before--BorderWidth
1px
.pf-v5-c-label--pf-v5-c-label__content--before--BorderColor
#d2d2d2
.pf-v5-c-label--pf-v5-c-label--m-outline--BackgroundColor
#fff
.pf-v5-c-label--pf-v5-c-label--m-outline__content--before--BorderWidth
1px
.pf-v5-c-label--pf-v5-c-label--m-outline__content--before--BorderColor
#d2d2d2
.pf-v5-c-label--pf-v5-c-label__content--link--hover--before--BorderWidth
2px
.pf-v5-c-label--pf-v5-c-label__content--link--focus--before--BorderWidth
2px
.pf-v5-c-label--pf-v5-c-label__content--link--hover--before--BorderColor
#8a8d90
.pf-v5-c-label--pf-v5-c-label__content--link--focus--before--BorderColor
#8a8d90
.pf-v5-c-label--pf-v5-c-label--m-outline__content--link--hover--before--BorderWidth
2px
.pf-v5-c-label--pf-v5-c-label--m-outline__content--link--focus--before--BorderWidth
2px
.pf-v5-c-label--pf-v5-c-label--m-outline__content--link--hover--before--BorderColor
#d2d2d2
.pf-v5-c-label--pf-v5-c-label--m-outline__content--link--focus--before--BorderColor
#d2d2d2
.pf-v5-c-label--pf-v5-c-label--m-blue--BackgroundColor
#e7f1fa
.pf-v5-c-label--pf-v5-c-label--m-blue__icon--Color
#06c
.pf-v5-c-label--pf-v5-c-label--m-blue__content--Color
#002952
.pf-v5-c-label--pf-v5-c-label--m-blue__content--before--BorderColor
#bee1f4
.pf-v5-c-label--pf-v5-c-label--m-blue__content--link--hover--before--BorderColor
#06c
.pf-v5-c-label--pf-v5-c-label--m-blue__content--link--focus--before--BorderColor
#06c
.pf-v5-c-label--pf-v5-c-label--m-outline--m-blue__content--Color
#06c
.pf-v5-c-label--pf-v5-c-label--m-outline--m-blue__content--before--BorderColor
#d2d2d2
.pf-v5-c-label--pf-v5-c-label--m-outline--m-blue__content--link--hover--before--BorderColor
#d2d2d2
.pf-v5-c-label--pf-v5-c-label--m-outline--m-blue__content--link--focus--before--BorderColor
#d2d2d2
.pf-v5-c-label--pf-v5-c-label--m-green--BackgroundColor
#f3faf2
.pf-v5-c-label--pf-v5-c-label--m-green__icon--Color
#3e8635
.pf-v5-c-label--pf-v5-c-label--m-green__content--Color
#1e4f18
.pf-v5-c-label--pf-v5-c-label--m-green__content--before--BorderColor
#bde5b8
.pf-v5-c-label--pf-v5-c-label--m-green__content--link--hover--before--BorderColor
#3e8635
.pf-v5-c-label--pf-v5-c-label--m-green__content--link--focus--before--BorderColor
#3e8635
.pf-v5-c-label--pf-v5-c-label--m-outline--m-green__content--Color
#3e8635
.pf-v5-c-label--pf-v5-c-label--m-outline--m-green__content--before--BorderColor
#d2d2d2
.pf-v5-c-label--pf-v5-c-label--m-outline--m-green__content--link--hover--before--BorderColor
#d2d2d2
.pf-v5-c-label--pf-v5-c-label--m-outline--m-green__content--link--focus--before--BorderColor
#d2d2d2
.pf-v5-c-label--pf-v5-c-label--m-orange--BackgroundColor
#fff6ec
.pf-v5-c-label--pf-v5-c-label--m-orange__icon--Color
#ec7a08
.pf-v5-c-label--pf-v5-c-label--m-orange__content--Color
#3b1f00
.pf-v5-c-label--pf-v5-c-label--m-orange__content--before--BorderColor
#f4b678
.pf-v5-c-label--pf-v5-c-label--m-orange__content--link--hover--before--BorderColor
#ec7a08
.pf-v5-c-label--pf-v5-c-label--m-orange__content--link--focus--before--BorderColor
#ec7a08
.pf-v5-c-label--pf-v5-c-label--m-outline--m-orange__content--Color
#8f4700
.pf-v5-c-label--pf-v5-c-label--m-outline--m-orange__content--before--BorderColor
#d2d2d2
.pf-v5-c-label--pf-v5-c-label--m-outline--m-orange__content--link--hover--before--BorderColor
#d2d2d2
.pf-v5-c-label--pf-v5-c-label--m-outline--m-orange__content--link--focus--before--BorderColor
#d2d2d2
.pf-v5-c-label--pf-v5-c-label--m-red--BackgroundColor
#faeae8
.pf-v5-c-label--pf-v5-c-label--m-red__icon--Color
#c9190b
.pf-v5-c-label--pf-v5-c-label--m-red__content--Color
#7d1007
.pf-v5-c-label--pf-v5-c-label--m-red__content--before--BorderColor
#c9190b
.pf-v5-c-label--pf-v5-c-label--m-red__content--link--hover--before--BorderColor
#c9190b
.pf-v5-c-label--pf-v5-c-label--m-red__content--link--focus--before--BorderColor
#c9190b
.pf-v5-c-label--pf-v5-c-label--m-outline--m-red__content--Color
#c9190b
.pf-v5-c-label--pf-v5-c-label--m-outline--m-red__content--before--BorderColor
#d2d2d2
.pf-v5-c-label--pf-v5-c-label--m-outline--m-red__content--link--hover--before--BorderColor
#d2d2d2
.pf-v5-c-label--pf-v5-c-label--m-outline--m-red__content--link--focus--before--BorderColor
#d2d2d2
.pf-v5-c-label--pf-v5-c-label--m-purple--BackgroundColor
#f2f0fc
.pf-v5-c-label--pf-v5-c-label--m-purple__icon--Color
#6753ac
.pf-v5-c-label--pf-v5-c-label--m-purple__content--Color
#1f0066
.pf-v5-c-label--pf-v5-c-label--m-purple__content--before--BorderColor
#cbc1ff
.pf-v5-c-label--pf-v5-c-label--m-purple__content--link--hover--before--BorderColor
#6753ac
.pf-v5-c-label--pf-v5-c-label--m-purple__content--link--focus--before--BorderColor
#6753ac
.pf-v5-c-label--pf-v5-c-label--m-outline--m-purple__content--Color
#6753ac
.pf-v5-c-label--pf-v5-c-label--m-outline--m-purple__content--before--BorderColor
#d2d2d2
.pf-v5-c-label--pf-v5-c-label--m-outline--m-purple__content--link--hover--before--BorderColor
#d2d2d2
.pf-v5-c-label--pf-v5-c-label--m-outline--m-purple__content--link--focus--before--BorderColor
#d2d2d2
.pf-v5-c-label--pf-v5-c-label--m-cyan--BackgroundColor
#f2f9f9
.pf-v5-c-label--pf-v5-c-label--m-cyan__icon--Color
#009596
.pf-v5-c-label--pf-v5-c-label--m-cyan__content--Color
#003737
.pf-v5-c-label--pf-v5-c-label--m-cyan__content--before--BorderColor
#a2d9d9
.pf-v5-c-label--pf-v5-c-label--m-cyan__content--link--hover--before--BorderColor
#009596
.pf-v5-c-label--pf-v5-c-label--m-cyan__content--link--focus--before--BorderColor
#009596
.pf-v5-c-label--pf-v5-c-label--m-outline--m-cyan__content--Color
#005f60
.pf-v5-c-label--pf-v5-c-label--m-outline--m-cyan__content--before--BorderColor
#d2d2d2
.pf-v5-c-label--pf-v5-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor
#d2d2d2
.pf-v5-c-label--pf-v5-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor
#d2d2d2
.pf-v5-c-label--pf-v5-c-label--m-gold--BackgroundColor
#fdf7e7
.pf-v5-c-label--pf-v5-c-label--m-gold__icon--Color
#f0ab00
.pf-v5-c-label--pf-v5-c-label--m-gold__content--Color
#3d2c00
.pf-v5-c-label--pf-v5-c-label--m-gold__content--before--BorderColor
#f9e0a2
.pf-v5-c-label--pf-v5-c-label--m-gold__content--link--hover--before--BorderColor
#f4c145
.pf-v5-c-label--pf-v5-c-label--m-gold__content--link--focus--before--BorderColor
#f4c145
.pf-v5-c-label--pf-v5-c-label--m-outline--m-gold__content--Color
#795600
.pf-v5-c-label--pf-v5-c-label--m-outline--m-gold__content--before--BorderColor
#d2d2d2
.pf-v5-c-label--pf-v5-c-label--m-outline--m-gold__content--link--hover--before--BorderColor
#d2d2d2
.pf-v5-c-label--pf-v5-c-label--m-outline--m-gold__content--link--focus--before--BorderColor
#d2d2d2
.pf-v5-c-label--pf-v5-c-label--m-overflow__content--Color
#06c
.pf-v5-c-label--pf-v5-c-label--m-overflow__content--BackgroundColor
#fff
.pf-v5-c-label--pf-v5-c-label--m-overflow__content--before--BorderWidth
1px
.pf-v5-c-label--pf-v5-c-label--m-overflow__content--before--BorderColor
#f0f0f0
.pf-v5-c-label--pf-v5-c-label--m-overflow__content--link--hover--before--BorderWidth
2px
.pf-v5-c-label--pf-v5-c-label--m-overflow__content--link--hover--before--BorderColor
#f0f0f0
.pf-v5-c-label--pf-v5-c-label--m-overflow__content--link--focus--before--BorderWidth
2px
.pf-v5-c-label--pf-v5-c-label--m-overflow__content--link--focus--before--BorderColor
#f0f0f0
.pf-v5-c-label--pf-v5-c-label--m-compact--PaddingTop
0
.pf-v5-c-label--pf-v5-c-label--m-compact--PaddingRight
0.5rem
.pf-v5-c-label--pf-v5-c-label--m-compact--PaddingBottom
0
.pf-v5-c-label--pf-v5-c-label--m-compact--PaddingLeft
0.5rem
.pf-v5-c-label--pf-v5-c-label--m-compact--FontSize
0.75rem
.pf-v5-c-label--pf-v5-c-label--m-compact--m-editable--TextDecorationOffset
0.0625rem
.pf-v5-c-label--pf-v5-c-label__content--Color
#151515
.pf-v5-c-label--pf-v5-c-label__content--BackgroundColor
transparent
.pf-v5-c-label--pf-v5-c-label__content--MaxWidth
100%
.pf-v5-c-label--pf-v5-c-label--m-outline__content--Color
#151515
.pf-v5-c-label--pf-v5-c-label--m-editable__content--MaxWidth
16ch
.pf-v5-c-label--pf-v5-c-label__text--MaxWidth
100%
.pf-v5-c-label--pf-v5-c-label__icon--Color
#151515
.pf-v5-c-label--pf-v5-c-label__icon--MarginRight
0.25rem
.pf-v5-c-label--pf-v5-c-label__actions--FontSize
0.75rem
.pf-v5-c-label--pf-v5-c-label__actions--MarginRight
calc(0.5rem * -1)
.pf-v5-c-label--pf-v5-c-label__actions--c-button--FontSize
0.75rem
.pf-v5-c-label--pf-v5-c-label__actions--c-button--MarginTop
calc(0.25rem * -1)
.pf-v5-c-label--pf-v5-c-label__actions--c-button--MarginBottom
calc(0.25rem * -1)
.pf-v5-c-label--pf-v5-c-label__actions--c-button--PaddingTop
0.25rem
.pf-v5-c-label--pf-v5-c-label__actions--c-button--PaddingRight
0.5rem
.pf-v5-c-label--pf-v5-c-label__actions--c-button--PaddingBottom
0.25rem
.pf-v5-c-label--pf-v5-c-label__actions--c-button--PaddingLeft
0.5rem
.pf-v5-c-label--pf-v5-c-label--m-editable--Cursor
pointer
.pf-v5-c-label--pf-v5-c-label--m-editable--TextDecoration
underline
.pf-v5-c-label--pf-v5-c-label--m-editable--TextDecorationStyle
dashed
.pf-v5-c-label--pf-v5-c-label--m-editable--TextDecorationThickness
1px
.pf-v5-c-label--pf-v5-c-label--m-editable--TextDecorationOffset
0.25rem
.pf-v5-c-label--pf-v5-c-label--m-editable--TextDecorationColor
#8a8d90
.pf-v5-c-label--pf-v5-c-label--m-editable--hover--TextDecorationColor
#151515
.pf-v5-c-label--pf-v5-c-label--m-editable--focus--TextDecorationColor
#151515
.pf-v5-c-label--pf-v5-c-label--m-editable__content--before--BorderWidth
1px
.pf-v5-c-label--pf-v5-c-label--m-editable__content--before--BorderColor
#d2d2d2
.pf-v5-c-label--pf-v5-c-label--m-editable__content--hover--before--BorderWidth
1px
.pf-v5-c-label--pf-v5-c-label--m-editable__content--hover--before--BorderColor
#d2d2d2
.pf-v5-c-label--pf-v5-c-label--m-editable__content--focus--before--BorderWidth
1px
.pf-v5-c-label--pf-v5-c-label--m-editable__content--focus--before--BorderColor
#d2d2d2
.pf-v5-c-label--pf-v5-c-label--m-editable--m-editable-active--Cursor
auto
.pf-v5-c-label--pf-v5-c-label--m-editable--m-editable-active--TextDecoration
none
.pf-v5-c-label--pf-v5-c-label--m-editable--m-editable-active--BackgroundColor
transparent
.pf-v5-c-label--pf-v5-c-label--m-editable--m-editable-active__content--before--BorderWidth
0
.pf-v5-c-label--pf-v5-c-label--m-editable--m-editable-active__content--before--BorderColor
transparent
.pf-v5-c-label--pf-v5-c-label--m-disabled--BackgroundColor
#d2d2d2
.pf-v5-c-label--pf-v5-c-label--m-disabled__content--Color
#6a6e73
.pf-v5-c-label--pf-v5-c-label--m-disabled__icon--Color
#6a6e73
.pf-v5-c-label--pf-v5-c-label--c-button--m-disabled--Color
#6a6e73
.pf-v5-c-label.pf-m-compact--pf-v5-c-label--PaddingTop
0
.pf-v5-c-label.pf-m-compact--pf-v5-c-label--PaddingRight
0.5rem
.pf-v5-c-label.pf-m-compact--pf-v5-c-label--PaddingBottom
0
.pf-v5-c-label.pf-m-compact--pf-v5-c-label--PaddingLeft
0.5rem
.pf-v5-c-label.pf-m-compact--pf-v5-c-label--FontSize
0.75rem
.pf-v5-c-label.pf-m-compact--pf-v5-c-label--m-editable--TextDecorationOffset
0.0625rem
.pf-v5-c-label.pf-m-blue--pf-v5-c-label--BackgroundColor
#e7f1fa
.pf-v5-c-label.pf-m-blue--pf-v5-c-label__icon--Color
#06c
.pf-v5-c-label.pf-m-blue--pf-v5-c-label__content--Color
#002952
.pf-v5-c-label.pf-m-blue--pf-v5-c-label__content--before--BorderColor
#bee1f4
.pf-v5-c-label.pf-m-blue--pf-v5-c-label__content--link--hover--before--BorderColor
#06c
.pf-v5-c-label.pf-m-blue--pf-v5-c-label__content--link--focus--before--BorderColor
#06c
.pf-v5-c-label.pf-m-blue--pf-v5-c-label--m-outline__content--Color
#06c
.pf-v5-c-label.pf-m-blue--pf-v5-c-label--m-outline__content--before--BorderColor
#d2d2d2
.pf-v5-c-label.pf-m-blue--pf-v5-c-label--m-outline__content--link--hover--before--BorderColor
#d2d2d2
.pf-v5-c-label.pf-m-blue--pf-v5-c-label--m-outline__content--link--focus--before--BorderColor
#d2d2d2
.pf-v5-c-label.pf-m-blue--pf-v5-c-label--m-editable__content--before--BorderColor
#bee1f4
.pf-v5-c-label.pf-m-blue--pf-v5-c-label--m-editable__content--hover--before--BorderColor
#bee1f4
.pf-v5-c-label.pf-m-blue--pf-v5-c-label--m-editable__content--focus--before--BorderColor
#bee1f4
.pf-v5-c-label.pf-m-green--pf-v5-c-label--BackgroundColor
#f3faf2
.pf-v5-c-label.pf-m-green--pf-v5-c-label__icon--Color
#3e8635
.pf-v5-c-label.pf-m-green--pf-v5-c-label__content--Color
#1e4f18
.pf-v5-c-label.pf-m-green--pf-v5-c-label__content--before--BorderColor
#bde5b8
.pf-v5-c-label.pf-m-green--pf-v5-c-label__content--link--hover--before--BorderColor
#3e8635
.pf-v5-c-label.pf-m-green--pf-v5-c-label__content--link--focus--before--BorderColor
#3e8635
.pf-v5-c-label.pf-m-green--pf-v5-c-label--m-outline__content--Color
#3e8635
.pf-v5-c-label.pf-m-green--pf-v5-c-label--m-outline__content--before--BorderColor
#d2d2d2
.pf-v5-c-label.pf-m-green--pf-v5-c-label--m-outline__content--link--hover--before--BorderColor
#d2d2d2
.pf-v5-c-label.pf-m-green--pf-v5-c-label--m-outline__content--link--focus--before--BorderColor
#d2d2d2
.pf-v5-c-label.pf-m-green--pf-v5-c-label--m-editable__content--before--BorderColor
#bde5b8
.pf-v5-c-label.pf-m-green--pf-v5-c-label--m-editable__content--hover--before--BorderColor
#bde5b8
.pf-v5-c-label.pf-m-green--pf-v5-c-label--m-editable__content--focus--before--BorderColor
#bde5b8
.pf-v5-c-label.pf-m-orange--pf-v5-c-label--BackgroundColor
#fff6ec
.pf-v5-c-label.pf-m-orange--pf-v5-c-label__icon--Color
#ec7a08
.pf-v5-c-label.pf-m-orange--pf-v5-c-label__content--Color
#3b1f00
.pf-v5-c-label.pf-m-orange--pf-v5-c-label__content--before--BorderColor
#f4b678
.pf-v5-c-label.pf-m-orange--pf-v5-c-label__content--link--hover--before--BorderColor
#ec7a08
.pf-v5-c-label.pf-m-orange--pf-v5-c-label__content--link--focus--before--BorderColor
#ec7a08
.pf-v5-c-label.pf-m-orange--pf-v5-c-label--m-outline__content--Color
#8f4700
.pf-v5-c-label.pf-m-orange--pf-v5-c-label--m-outline__content--before--BorderColor
#d2d2d2
.pf-v5-c-label.pf-m-orange--pf-v5-c-label--m-outline__content--link--hover--before--BorderColor
#d2d2d2
.pf-v5-c-label.pf-m-orange--pf-v5-c-label--m-outline__content--link--focus--before--BorderColor
#d2d2d2
.pf-v5-c-label.pf-m-orange--pf-v5-c-label--m-editable__content--before--BorderColor
#f4b678
.pf-v5-c-label.pf-m-orange--pf-v5-c-label--m-editable__content--hover--before--BorderColor
#f4b678
.pf-v5-c-label.pf-m-orange--pf-v5-c-label--m-editable__content--focus--before--BorderColor
#f4b678
.pf-v5-c-label.pf-m-red--pf-v5-c-label--BackgroundColor
#faeae8
.pf-v5-c-label.pf-m-red--pf-v5-c-label__icon--Color
#c9190b
.pf-v5-c-label.pf-m-red--pf-v5-c-label__content--Color
#7d1007
.pf-v5-c-label.pf-m-red--pf-v5-c-label__content--before--BorderColor
#c9190b
.pf-v5-c-label.pf-m-red--pf-v5-c-label__content--link--hover--before--BorderColor
#c9190b
.pf-v5-c-label.pf-m-red--pf-v5-c-label__content--link--focus--before--BorderColor
#c9190b
.pf-v5-c-label.pf-m-red--pf-v5-c-label--m-outline__content--Color
#c9190b
.pf-v5-c-label.pf-m-red--pf-v5-c-label--m-outline__content--before--BorderColor
#d2d2d2
.pf-v5-c-label.pf-m-red--pf-v5-c-label--m-outline__content--link--hover--before--BorderColor
#d2d2d2
.pf-v5-c-label.pf-m-red--pf-v5-c-label--m-outline__content--link--focus--before--BorderColor
#d2d2d2
.pf-v5-c-label.pf-m-red--pf-v5-c-label--m-editable__content--before--BorderColor
#c9190b
.pf-v5-c-label.pf-m-red--pf-v5-c-label--m-editable__content--hover--before--BorderColor
#c9190b
.pf-v5-c-label.pf-m-red--pf-v5-c-label--m-editable__content--focus--before--BorderColor
#c9190b
.pf-v5-c-label.pf-m-purple--pf-v5-c-label--BackgroundColor
#f2f0fc
.pf-v5-c-label.pf-m-purple--pf-v5-c-label__icon--Color
#6753ac
.pf-v5-c-label.pf-m-purple--pf-v5-c-label__content--Color
#1f0066
.pf-v5-c-label.pf-m-purple--pf-v5-c-label__content--before--BorderColor
#cbc1ff
.pf-v5-c-label.pf-m-purple--pf-v5-c-label__content--link--hover--before--BorderColor
#6753ac
.pf-v5-c-label.pf-m-purple--pf-v5-c-label__content--link--focus--before--BorderColor
#6753ac
.pf-v5-c-label.pf-m-purple--pf-v5-c-label--m-outline__content--Color
#6753ac
.pf-v5-c-label.pf-m-purple--pf-v5-c-label--m-outline__content--before--BorderColor
#d2d2d2
.pf-v5-c-label.pf-m-purple--pf-v5-c-label--m-outline__content--link--hover--before--BorderColor
#d2d2d2
.pf-v5-c-label.pf-m-purple--pf-v5-c-label--m-outline__content--link--focus--before--BorderColor
#d2d2d2
.pf-v5-c-label.pf-m-purple--pf-v5-c-label--m-editable__content--before--BorderColor
#cbc1ff
.pf-v5-c-label.pf-m-purple--pf-v5-c-label--m-editable__content--hover--before--BorderColor
#cbc1ff
.pf-v5-c-label.pf-m-purple--pf-v5-c-label--m-editable__content--focus--before--BorderColor
#cbc1ff
.pf-v5-c-label.pf-m-cyan--pf-v5-c-label--BackgroundColor
#f2f9f9
.pf-v5-c-label.pf-m-cyan--pf-v5-c-label__icon--Color
#009596
.pf-v5-c-label.pf-m-cyan--pf-v5-c-label__content--Color
#003737
.pf-v5-c-label.pf-m-cyan--pf-v5-c-label__content--before--BorderColor
#a2d9d9
.pf-v5-c-label.pf-m-cyan--pf-v5-c-label__content--link--hover--before--BorderColor
#009596
.pf-v5-c-label.pf-m-cyan--pf-v5-c-label__content--link--focus--before--BorderColor
#009596
.pf-v5-c-label.pf-m-cyan--pf-v5-c-label--m-outline__content--Color
#005f60
.pf-v5-c-label.pf-m-cyan--pf-v5-c-label--m-outline__content--before--BorderColor
#d2d2d2
.pf-v5-c-label.pf-m-cyan--pf-v5-c-label--m-outline__content--link--hover--before--BorderColor
#d2d2d2
.pf-v5-c-label.pf-m-cyan--pf-v5-c-label--m-outline__content--link--focus--before--BorderColor
#d2d2d2
.pf-v5-c-label.pf-m-cyan--pf-v5-c-label--m-editable__content--before--BorderColor
#a2d9d9
.pf-v5-c-label.pf-m-cyan--pf-v5-c-label--m-editable__content--hover--before--BorderColor
#a2d9d9
.pf-v5-c-label.pf-m-cyan--pf-v5-c-label--m-editable__content--focus--before--BorderColor
#a2d9d9
.pf-v5-c-label.pf-m-gold--pf-v5-c-label--BackgroundColor
#fdf7e7
.pf-v5-c-label.pf-m-gold--pf-v5-c-label__icon--Color
#f0ab00
.pf-v5-c-label.pf-m-gold--pf-v5-c-label__content--Color
#3d2c00
.pf-v5-c-label.pf-m-gold--pf-v5-c-label__content--before--BorderColor
#f9e0a2
.pf-v5-c-label.pf-m-gold--pf-v5-c-label__content--link--hover--before--BorderColor
#f4c145
.pf-v5-c-label.pf-m-gold--pf-v5-c-label__content--link--focus--before--BorderColor
#f4c145
.pf-v5-c-label.pf-m-gold--pf-v5-c-label--m-outline__content--Color
#795600
.pf-v5-c-label.pf-m-gold--pf-v5-c-label--m-outline__content--before--BorderColor
#d2d2d2
.pf-v5-c-label.pf-m-gold--pf-v5-c-label--m-outline__content--link--hover--before--BorderColor
#d2d2d2
.pf-v5-c-label.pf-m-gold--pf-v5-c-label--m-outline__content--link--focus--before--BorderColor
#d2d2d2
.pf-v5-c-label.pf-m-gold--pf-v5-c-label--m-editable__content--before--BorderColor
#f9e0a2
.pf-v5-c-label.pf-m-gold--pf-v5-c-label--m-editable__content--hover--before--BorderColor
#f9e0a2
.pf-v5-c-label.pf-m-gold--pf-v5-c-label--m-editable__content--focus--before--BorderColor
#f9e0a2
.pf-v5-c-label.pf-m-outline--pf-v5-c-label__content--Color
#151515
.pf-v5-c-label.pf-m-outline--pf-v5-c-label__content--before--BorderWidth
1px
.pf-v5-c-label.pf-m-outline--pf-v5-c-label__content--before--BorderColor
#d2d2d2
.pf-v5-c-label.pf-m-outline--pf-v5-c-label--BackgroundColor
#fff
.pf-v5-c-label.pf-m-outline--pf-v5-c-label--m-editable__content--before--BorderColor
#d2d2d2
.pf-v5-c-label.pf-m-outline--pf-v5-c-label--m-editable__content--hover--before--BorderColor
#d2d2d2
.pf-v5-c-label.pf-m-outline--pf-v5-c-label--m-editable__content--focus--before--BorderColor
#d2d2d2
.pf-v5-c-label.pf-m-overflow:hover--pf-v5-c-label__content--before--BorderWidth
2px
.pf-v5-c-label.pf-m-overflow:hover--pf-v5-c-label__content--before--BorderColor
#d2d2d2
.pf-v5-c-label.pf-m-overflow:focus--pf-v5-c-label__content--before--BorderWidth
2px
.pf-v5-c-label.pf-m-overflow:focus--pf-v5-c-label__content--before--BorderColor
#d2d2d2
.pf-v5-c-label.pf-m-editable--pf-v5-c-label__content--MaxWidth
16ch
.pf-v5-c-label.pf-m-editable--pf-v5-c-label__content--before--BorderWidth
1px
.pf-v5-c-label.pf-m-editable--pf-v5-c-label__content--before--BorderColor
#d2d2d2
.pf-v5-c-label.pf-m-editable--pf-v5-c-label__content--link--hover--before--BorderWidth
1px
.pf-v5-c-label.pf-m-editable--pf-v5-c-label__content--link--hover--before--BorderColor
#d2d2d2
.pf-v5-c-label.pf-m-editable--pf-v5-c-label__content--link--focus--before--BorderWidth
1px
.pf-v5-c-label.pf-m-editable--pf-v5-c-label__content--link--focus--before--BorderColor
#d2d2d2
.pf-v5-c-label.pf-m-editable--pf-v5-c-label--m-outline__content--link--hover--before--BorderWidth
1px
.pf-v5-c-label.pf-m-editable--pf-v5-c-label--m-outline__content--link--focus--before--BorderWidth
1px
.pf-v5-c-label.pf-m-editable:hover--pf-v5-c-label--m-editable--TextDecorationColor
#151515
.pf-v5-c-label.pf-m-editable:focus--pf-v5-c-label--m-editable--TextDecorationColor
#151515
.pf-v5-c-label.pf-m-editable-active--pf-v5-c-label--m-editable--Cursor
auto
.pf-v5-c-label.pf-m-editable-active--pf-v5-c-label--m-editable--TextDecoration
none
.pf-v5-c-label.pf-m-editable-active--pf-v5-c-label--BackgroundColor
transparent
.pf-v5-c-label.pf-m-overflow--pf-v5-c-label__content--Color
#06c
.pf-v5-c-label.pf-m-overflow--pf-v5-c-label--BackgroundColor
#fff
.pf-v5-c-label.pf-m-overflow--pf-v5-c-label__content--before--BorderWidth
1px
.pf-v5-c-label.pf-m-overflow--pf-v5-c-label__content--before--BorderColor
#f0f0f0
.pf-v5-c-label.pf-m-overflow--pf-v5-c-label__content--link--hover--before--BorderWidth
2px
.pf-v5-c-label.pf-m-overflow--pf-v5-c-label__content--link--hover--before--BorderColor
#f0f0f0
.pf-v5-c-label.pf-m-overflow--pf-v5-c-label__content--link--focus--before--BorderWidth
2px
.pf-v5-c-label.pf-m-overflow--pf-v5-c-label__content--link--focus--before--BorderColor
#f0f0f0
.pf-v5-c-label.pf-m-disabled--pf-v5-c-label--BackgroundColor
#d2d2d2
.pf-v5-c-label.pf-m-disabled--pf-v5-c-label__content--Color
#6a6e73
.pf-v5-c-label.pf-m-disabled--pf-v5-c-label__icon--Color
#6a6e73
.pf-v5-c-label.pf-m-disabled--pf-v5-c-label__content--before--BorderWidth
0
.pf-v5-c-label.pf-m-disabled .pf-v5-c-button--pf-v5-c-button--m-plain--disabled--Color
#6a6e73
a.pf-v5-c-label__content:hover--pf-v5-c-label__content--before--BorderWidth
2px
a.pf-v5-c-label__content:hover--pf-v5-c-label__content--before--BorderColor
#8a8d90
a.pf-v5-c-label__content:focus--pf-v5-c-label__content--before--BorderWidth
2px
a.pf-v5-c-label__content:focus--pf-v5-c-label__content--before--BorderColor
#8a8d90
.pf-v5-c-label__actions .pf-v5-c-button--pf-v5-c-button--FontSize
0.75rem
.pf-v5-c-label__actions .pf-v5-c-button--pf-v5-c-button--PaddingTop
0.25rem
.pf-v5-c-label__actions .pf-v5-c-button--pf-v5-c-button--PaddingRight
0.5rem
.pf-v5-c-label__actions .pf-v5-c-button--pf-v5-c-button--PaddingBottom
0.25rem
.pf-v5-c-label__actions .pf-v5-c-button--pf-v5-c-button--PaddingLeft
0.5rem

Prefixed with 'pf-v5-c-label-group'

Expand or collapse columnSelectorVariableValue
.pf-v5-c-label-group--pf-v5-c-label-group--RowGap
0.5rem
.pf-v5-c-label-group--pf-v5-c-label-group--ColumnGap
0
.pf-v5-c-label-group--pf-v5-c-label-group--m-vertical--RowGap
0.5rem
.pf-v5-c-label-group--pf-v5-c-label-group--m-vertical--ColumnGap
0.5rem
.pf-v5-c-label-group--pf-v5-c-label-group__main--RowGap
0.25rem
.pf-v5-c-label-group--pf-v5-c-label-group__main--ColumnGap
0.5rem
.pf-v5-c-label-group--pf-v5-c-label-group--m-vertical__main--RowGap
0.5rem
.pf-v5-c-label-group--pf-v5-c-label-group--m-vertical__main--ColumnGap
0.25rem
.pf-v5-c-label-group--pf-v5-c-label-group__list--RowGap
0.25rem
.pf-v5-c-label-group--pf-v5-c-label-group__list--ColumnGap
0.25rem
.pf-v5-c-label-group--pf-v5-c-label-group--m-vertical__list--RowGap
0.25rem
.pf-v5-c-label-group--pf-v5-c-label-group--m-vertical__list--ColumnGap
0.25rem
.pf-v5-c-label-group--pf-v5-c-label-group--m-category--PaddingTop
0.25rem
.pf-v5-c-label-group--pf-v5-c-label-group--m-category--PaddingRight
0.25rem
.pf-v5-c-label-group--pf-v5-c-label-group--m-category--PaddingBottom
0.25rem
.pf-v5-c-label-group--pf-v5-c-label-group--m-category--PaddingLeft
0.5rem
.pf-v5-c-label-group--pf-v5-c-label-group--m-vertical--m-category--PaddingRight
0.5rem
.pf-v5-c-label-group--pf-v5-c-label-group--m-category--BorderRadius
3px
.pf-v5-c-label-group--pf-v5-c-label-group--m-category--BorderWidth
1px
.pf-v5-c-label-group--pf-v5-c-label-group--m-category--BorderColor
#f0f0f0
.pf-v5-c-label-group--pf-v5-c-label-group--m-category--BackgroundColor
#fff
.pf-v5-c-label-group--pf-v5-c-label-group__label--FontSize
0.875rem
.pf-v5-c-label-group--pf-v5-c-label-group__label--MaxWidth
18ch
.pf-v5-c-label-group--pf-v5-c-label-group__close--MarginTop
calc(0.25rem * -1)
.pf-v5-c-label-group--pf-v5-c-label-group__close--MarginBottom
calc(0.25rem * -1)
.pf-v5-c-label-group--pf-v5-c-label-group--m-vertical__close--MarginTop
calc(0.375rem * -1)
.pf-v5-c-label-group--pf-v5-c-label-group--m-vertical__close--MarginRight
calc(0.375rem * -1)
.pf-v5-c-label-group--pf-v5-c-label-group--m-vertical__close--c-button--PaddingRight
0.5rem
.pf-v5-c-label-group--pf-v5-c-label-group--m-vertical__close--c-button--PaddingLeft
0.5rem
.pf-v5-c-label-group--pf-v5-c-label-group__textarea--MinWidth
12.5rem
.pf-v5-c-label-group--pf-v5-c-label-group__textarea--PaddingTop
0.125rem
.pf-v5-c-label-group--pf-v5-c-label-group__textarea--PaddingRight
0.25rem
.pf-v5-c-label-group--pf-v5-c-label-group__textarea--PaddingBottom
0
.pf-v5-c-label-group--pf-v5-c-label-group__textarea--PaddingLeft
0.25rem
.pf-v5-c-label-group.pf-m-vertical--pf-v5-c-label-group--RowGap
0.5rem
.pf-v5-c-label-group.pf-m-vertical--pf-v5-c-label-group--ColumnGap
0.5rem
.pf-v5-c-label-group.pf-m-vertical--pf-v5-c-label-group__main--RowGap
0.5rem
.pf-v5-c-label-group.pf-m-vertical--pf-v5-c-label-group__main--ColumnGap
0.25rem
.pf-v5-c-label-group.pf-m-vertical--pf-v5-c-label-group__list--RowGap
0.25rem
.pf-v5-c-label-group.pf-m-vertical--pf-v5-c-label-group__list--ColumnGap
0.25rem
.pf-v5-c-label-group.pf-m-vertical--pf-v5-c-label-group__close--MarginTop
calc(0.375rem * -1)
.pf-v5-c-label-group.pf-m-vertical--pf-v5-c-label-group__close--MarginLeft
undefined
.pf-v5-c-label-group.pf-m-vertical--pf-v5-c-label-group__close--MarginBottom
0
.pf-v5-c-label-group.pf-m-vertical--pf-v5-c-label-group__close--MarginRight
calc(0.375rem * -1)
.pf-v5-c-label-group.pf-m-vertical--pf-v5-c-label-group--m-category--PaddingRight
0.5rem
.pf-v5-c-label-group.pf-m-vertical .pf-v5-c-label-group__close .pf-v5-c-button--pf-v5-c-button--PaddingLeft
0.5rem
.pf-v5-c-label-group.pf-m-vertical .pf-v5-c-label-group__close .pf-v5-c-button--pf-v5-c-button--PaddingRight
0.5rem

View source on GitHub