Skip to content
PatternFly

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, 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
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines