Skip to content

Label

A label is a descriptive annotation that adds context to an element for clarity and convenience.

Examples

Filled

Non-status:

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)

Orange red Orange red icon Orange red removable Orange red icon removable Orange red link Orange red link removable Orange red label, max-width truncation customization Orange red label with icon and set max-width truncation customization Orange 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)

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

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

Status:

Success Success removable Success link Success link removable Success, max-width truncation customization Success removable, max-width truncation customization Success link removable (disabled)

Warning Warning removable Warning link Warning link removable Warning, max-width truncation customization Warning removable, max-width truncation customization Warning link removable (disabled)

Danger Danger removable Danger link Danger link removable Danger, max-width truncation customization Danger removable, max-width truncation customization Danger link removable (disabled)

Info Info removable Info link Info link removable Info, max-width truncation customization Info removable, max-width truncation customization Info link removable (disabled)

Custom Custom removable Custom link Custom link removable Custom, max-width truncation customization Custom removable, max-width truncation customization Custom link removable (disabled)

Outline

Non-status:

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)

Orange red Orange red icon Orange red removable Orange red icon removable Orange red link Orange red link removable Orange red label, max-width truncation customization Orange red label with icon and set max-width truncation customization Orange 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)

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

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

Status:

Success Success removable Success link Success link removable Success, max-width truncation customization Success removable, max-width truncation customization Success link removable (disabled)

Warning Warning removable Warning link Warning link removable Warning, max-width truncation customization Warning removable, max-width truncation customization Warning link removable (disabled)

Danger Danger removable Danger link Danger link removable Danger, max-width truncation customization Danger removable, max-width truncation customization Danger link removable (disabled)

Info Info removable Info link Info link removable Info, max-width truncation customization Info removable, max-width truncation customization Info link removable (disabled)

Custom Custom removable Custom link Custom link removable Custom, max-width truncation customization Custom removable, max-width truncation customization Custom 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)

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.

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-v6-c-label-group.pf-m-editable onClick event should (excluding labels within) set focus on .pf-v6-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-v6-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. Note: always use with either .pf-m-filled or .pf-m-outline.
.pf-v6-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-v6-c-label__icon
<span>
Initiates a label icon.
.pf-v6-c-label__text
<span>
Initiates label text. Required
.pf-v6-c-label__editable-text
<button>, <input>
Initiates editable label text. See the editable example for details about handling behavior in Javascript.
.pf-v6-c-label__actions
<span>
Creates a wrapper for label actions. Required for removable labels
.pf-m-filled
.pf-v6-c-label
Modifies label for filled styles.
.pf-m-outline
.pf-v6-c-label
Modifies label for outline styles.
.pf-m-compact
.pf-v6-c-label
Modifies label for compact styles.
.pf-m-overflow
.pf-v6-c-label
Modifies label for overflow styles for use in a label group.
.pf-m-add
.pf-v6-c-label
Modifies label for add styles for use in a label group.
.pf-m-blue
.pf-v6-c-label
Modifies the label to have blue colored styling.
.pf-m-green
.pf-v6-c-label
Modifies the label to have green colored styling.
.pf-m-orange
.pf-v6-c-label
Modifies the label to have orange colored styling.
.pf-m-red
.pf-v6-c-label
Modifies the label to have red colored styling.
.pf-m-purple
.pf-v6-c-label
Modifies the label to have purple colored styling.
.pf-m-teal
.pf-v6-c-label
Modifies the label to have teal colored styling.
.pf-m-yellow
.pf-v6-c-label
Modifies the label to have yellow colored styling.
.pf-m-success
.pf-v6-c-label
Modifies the label to have success colored styling.
.pf-m-warning
.pf-v6-c-label
Modifies the label to have warning colored styling.
.pf-m-danger
.pf-v6-c-label
Modifies the label to have danger colored styling.
.pf-m-info
.pf-v6-c-label
Modifies the label to have info colored styling.
.pf-m-custom
.pf-v6-c-label
Modifies the label to have custom colored styling.
.pf-m-disabled
.pf-v6-c-label
Modifies label for disabled styles.
.pf-m-editable
.pf-v6-c-label
Modifies label for editable styles.
.pf-m-editable-active
.pf-v6-c-label.pf-m-editable
Modifies editable label for active styles.
--pf-v6-c-label__text--MaxWidth
.pf-v6-c-label
Modifiex the max width of the text before text will truncate.

Label group accessibility

Attribute
Applied to
Outcome
role="list"
.pf-v6-c-label-group__list
Indicates that the label group list is a list element. This role is redundant since .pf-v6-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-v6-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-v6-c-label-group__close > button] [id value of .pf-v6-c-label-group__label]"
.pf-v6-c-label-group__close > button
Provides an accessible name for the button. Required
aria-label="[label text]"
.pf-v6-c-label-group__textarea
Provides an accessible name for the textarea. Required
row="1"
.pf-v6-c-label-group__textarea
Indicates that the label group textarea is one row. Required
tabindex="0"
.pf-v6-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-v6-c-label-group
<div>
Initiates the label group component. Required.
.pf-v6-c-label-group__list
<ul>
Initiates the container for a list of labels. Required.
.pf-v6-c-label-group__list-item
<li>
Initiates the list item inside of the label group. Required.
.pf-v6-c-label-group__main
<div>
Initiates the main element in the label group. Required when label and list are present
.pf-v6-c-label-group__textarea
<textarea>
Initiates the textarea element in the label group. Required when label group is editable
.pf-v6-c-label-group__label
<span>
Initiates the label to be used in the label group.
.pf-v6-c-label-group__close
<div>
Initiates the container used for the button to remove the label group.
.pf-v6-c-button
.pf-v6-c-label-group__close <button>
Initiates the button used to remove the label group.
.pf-m-editable
.pf-v6-c-label-group
Modifies the label group to support editable styling.
.pf-m-category
.pf-v6-c-label-group
Modifies the label group to support category styling.
.pf-m-textarea
.pf-v6-c-label-group__list-item
Modifies the label group list item to support textarea.

CSS variables

Prefixed with 'pf-v6-c-label'

Expand or collapse columnSelectorVariableValue
.pf-v6-c-label--pf-v6-c-label--PaddingBlockStart
0.25rem
.pf-v6-c-label--pf-v6-c-label--PaddingInlineEnd
0.5rem
.pf-v6-c-label--pf-v6-c-label--PaddingBlockEnd
0.25rem
.pf-v6-c-label--pf-v6-c-label--PaddingInlineStart
0.5rem
.pf-v6-c-label--pf-v6-c-label--MaxWidth
100%
.pf-v6-c-label--pf-v6-c-label--BorderWidth
0
.pf-v6-c-label--pf-v6-c-label--BorderColor
transparent
.pf-v6-c-label--pf-v6-c-label--BorderRadius
999px
.pf-v6-c-label--pf-v6-c-label--FontSize
0.75rem
.pf-v6-c-label--pf-v6-c-label--BackgroundColor
(In light theme) #e0e0e0
.pf-v6-c-label--pf-v6-c-label--Color
(In light theme) #151515
.pf-v6-c-label--pf-v6-c-label__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label--pf-v6-c-label--m-clickable--hover--BackgroundColor
(In light theme) #c7c7c7
.pf-v6-c-label--pf-v6-c-label--m-clickable--hover--Color
(In light theme) #151515
.pf-v6-c-label--pf-v6-c-label--m-clickable--hover__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label--pf-v6-c-label--m-outline--BorderColor
(In light theme) #c7c7c7
.pf-v6-c-label--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor
(In light theme) #a3a3a3
.pf-v6-c-label--pf-v6-c-label--m-blue--BackgroundColor
(In light theme) #b9dafc
.pf-v6-c-label--pf-v6-c-label--m-blue--Color
(In light theme) #151515
.pf-v6-c-label--pf-v6-c-label--m-blue__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor
(In light theme) #92c5f9
.pf-v6-c-label--pf-v6-c-label--m-blue--m-clickable--hover--Color
(In light theme) #151515
.pf-v6-c-label--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label--pf-v6-c-label--m-blue--m-outline--BorderColor
(In light theme) #92c5f9
.pf-v6-c-label--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor
(In light theme) #4394e5
.pf-v6-c-label--pf-v6-c-label--m-red--BackgroundColor
(In light theme) #fbc5c5
.pf-v6-c-label--pf-v6-c-label--m-red--Color
(In light theme) #151515
.pf-v6-c-label--pf-v6-c-label--m-red__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor
(In light theme) #f9a8a8
.pf-v6-c-label--pf-v6-c-label--m-red--m-clickable--hover--Color
(In light theme) #151515
.pf-v6-c-label--pf-v6-c-label--m-red--m-clickable--hover__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label--pf-v6-c-label--m-red--m-outline--BorderColor
(In light theme) #f9a8a8
.pf-v6-c-label--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor
(In light theme) #f56e6e
.pf-v6-c-label--pf-v6-c-label--m-orange--BackgroundColor
(In light theme) #fccb8f
.pf-v6-c-label--pf-v6-c-label--m-orange--Color
(In light theme) #151515
.pf-v6-c-label--pf-v6-c-label--m-orange__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor
(In light theme) #f8ae54
.pf-v6-c-label--pf-v6-c-label--m-orange--m-clickable--hover--Color
(In light theme) #151515
.pf-v6-c-label--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label--pf-v6-c-label--m-orange--m-outline--BorderColor
(In light theme) #f8ae54
.pf-v6-c-label--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor
(In light theme) #f5921b
.pf-v6-c-label--pf-v6-c-label--m-orangered--BackgroundColor
(In light theme) #fbbea8
.pf-v6-c-label--pf-v6-c-label--m-orangered--Color
(In light theme) #151515
.pf-v6-c-label--pf-v6-c-label--m-orangered__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor
(In light theme) #f89b78
.pf-v6-c-label--pf-v6-c-label--m-orangered--m-clickable--hover--Color
(In light theme) #151515
.pf-v6-c-label--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label--pf-v6-c-label--m-orangered--m-outline--BorderColor
(In light theme) #f89b78
.pf-v6-c-label--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor
(In light theme) #f4784a
.pf-v6-c-label--pf-v6-c-label--m-yellow--BackgroundColor
(In light theme) #ffe072
.pf-v6-c-label--pf-v6-c-label--m-yellow--Color
(In light theme) #151515
.pf-v6-c-label--pf-v6-c-label--m-yellow__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor
(In light theme) #ffcc17
.pf-v6-c-label--pf-v6-c-label--m-yellow--m-clickable--hover--Color
(In light theme) #151515
.pf-v6-c-label--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label--pf-v6-c-label--m-yellow--m-outline--BorderColor
(In light theme) #ffcc17
.pf-v6-c-label--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor
(In light theme) #dca614
.pf-v6-c-label--pf-v6-c-label--m-green--BackgroundColor
(In light theme) #d1f1bb
.pf-v6-c-label--pf-v6-c-label--m-green--Color
(In light theme) #151515
.pf-v6-c-label--pf-v6-c-label--m-green__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor
(In light theme) #afdc8f
.pf-v6-c-label--pf-v6-c-label--m-green--m-clickable--hover--Color
(In light theme) #151515
.pf-v6-c-label--pf-v6-c-label--m-green--m-clickable--hover__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label--pf-v6-c-label--m-green--m-outline--BorderColor
(In light theme) #afdc8f
.pf-v6-c-label--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor
(In light theme) #87bb62
.pf-v6-c-label--pf-v6-c-label--m-teal--BackgroundColor
(In light theme) #b9e5e5
.pf-v6-c-label--pf-v6-c-label--m-teal--Color
(In light theme) #151515
.pf-v6-c-label--pf-v6-c-label--m-teal__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor
(In light theme) #9ad8d8
.pf-v6-c-label--pf-v6-c-label--m-teal--m-clickable--hover--Color
(In light theme) #151515
.pf-v6-c-label--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label--pf-v6-c-label--m-teal--m-outline--BorderColor
(In light theme) #9ad8d8
.pf-v6-c-label--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor
(In light theme) #63bdbd
.pf-v6-c-label--pf-v6-c-label--m-purple--BackgroundColor
(In light theme) #d0c5f4
.pf-v6-c-label--pf-v6-c-label--m-purple--Color
(In light theme) #151515
.pf-v6-c-label--pf-v6-c-label--m-purple__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor
(In light theme) #b6a6e9
.pf-v6-c-label--pf-v6-c-label--m-purple--m-clickable--hover--Color
(In light theme) #151515
.pf-v6-c-label--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label--pf-v6-c-label--m-purple--m-outline--BorderColor
(In light theme) #b6a6e9
.pf-v6-c-label--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor
(In light theme) #876fd4
.pf-v6-c-label--pf-v6-c-label--m-success--BackgroundColor
(In light theme) #3d7317
.pf-v6-c-label--pf-v6-c-label--m-success--Color
(In light theme) #ffffff
.pf-v6-c-label--pf-v6-c-label--m-success__icon--Color
(In light theme) #ffffff
.pf-v6-c-label--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor
(In light theme) #204d00
.pf-v6-c-label--pf-v6-c-label--m-success--m-clickable--hover--Color
(In light theme) #ffffff
.pf-v6-c-label--pf-v6-c-label--m-success--m-clickable--hover__icon--Color
(In light theme) #ffffff
.pf-v6-c-label--pf-v6-c-label--m-success--m-outline__icon--Color
(In light theme) #3d7317
.pf-v6-c-label--pf-v6-c-label--m-success--m-outline--BorderColor
(In light theme) #3d7317
.pf-v6-c-label--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor
(In light theme) #204d00
.pf-v6-c-label--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color
(In light theme) #204d00
.pf-v6-c-label--pf-v6-c-label--m-warning--BackgroundColor
(In light theme) #ffcc17
.pf-v6-c-label--pf-v6-c-label--m-warning--Color
(In light theme) #151515
.pf-v6-c-label--pf-v6-c-label--m-warning__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor
(In light theme) #dca614
.pf-v6-c-label--pf-v6-c-label--m-warning--m-clickable--hover--Color
(In light theme) #151515
.pf-v6-c-label--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label--pf-v6-c-label--m-warning--m-outline__icon--Color
(In light theme) #dca614
.pf-v6-c-label--pf-v6-c-label--m-warning--m-outline--BorderColor
(In light theme) #dca614
.pf-v6-c-label--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor
(In light theme) #b98412
.pf-v6-c-label--pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color
(In light theme) #b98412
.pf-v6-c-label--pf-v6-c-label--m-danger--BackgroundColor
(In light theme) #b1380b
.pf-v6-c-label--pf-v6-c-label--m-danger--Color
(In light theme) #ffffff
.pf-v6-c-label--pf-v6-c-label--m-danger__icon--Color
(In light theme) #ffffff
.pf-v6-c-label--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor
(In light theme) #731f00
.pf-v6-c-label--pf-v6-c-label--m-danger--m-clickable--hover--Color
(In light theme) #ffffff
.pf-v6-c-label--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color
(In light theme) #ffffff
.pf-v6-c-label--pf-v6-c-label--m-danger--m-outline__icon--Color
(In light theme) #b1380b
.pf-v6-c-label--pf-v6-c-label--m-danger--m-outline--BorderColor
(In light theme) #b1380b
.pf-v6-c-label--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor
(In light theme) #731f00
.pf-v6-c-label--pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color
(In light theme) #731f00
.pf-v6-c-label--pf-v6-c-label--m-info--BackgroundColor
(In light theme) #5e40be
.pf-v6-c-label--pf-v6-c-label--m-info--Color
(In light theme) #ffffff
.pf-v6-c-label--pf-v6-c-label--m-info__icon--Color
(In light theme) #ffffff
.pf-v6-c-label--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor
(In light theme) #3d2785
.pf-v6-c-label--pf-v6-c-label--m-info--m-clickable--hover--Color
(In light theme) #ffffff
.pf-v6-c-label--pf-v6-c-label--m-info--m-clickable--hover__icon--Color
(In light theme) #ffffff
.pf-v6-c-label--pf-v6-c-label--m-info--m-outline__icon--Color
(In light theme) #5e40be
.pf-v6-c-label--pf-v6-c-label--m-info--m-outline--BorderColor
(In light theme) #5e40be
.pf-v6-c-label--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor
(In light theme) #3d2785
.pf-v6-c-label--pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color
(In light theme) #3d2785
.pf-v6-c-label--pf-v6-c-label--m-custom--BackgroundColor
(In light theme) #147878
.pf-v6-c-label--pf-v6-c-label--m-custom--Color
(In light theme) #ffffff
.pf-v6-c-label--pf-v6-c-label--m-custom__icon--Color
(In light theme) #ffffff
.pf-v6-c-label--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor
(In light theme) #004d4d
.pf-v6-c-label--pf-v6-c-label--m-custom--m-clickable--hover--Color
(In light theme) #ffffff
.pf-v6-c-label--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color
(In light theme) #ffffff
.pf-v6-c-label--pf-v6-c-label--m-custom--m-outline__icon--Color
(In light theme) #147878
.pf-v6-c-label--pf-v6-c-label--m-custom--m-outline--BorderColor
(In light theme) #147878
.pf-v6-c-label--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor
(In light theme) #004d4d
.pf-v6-c-label--pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color
(In light theme) #004d4d
.pf-v6-c-label--pf-v6-c-label--m-clickable--hover--BorderWidth
0
.pf-v6-c-label--pf-v6-c-label--m-clickable--hover--BorderColor
transparent
.pf-v6-c-label--pf-v6-c-label--m-clickable__content--Cursor
pointer
.pf-v6-c-label--pf-v6-c-label--m-filled__actions--c-button__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label--pf-v6-c-label--m-outline--BorderWidth
1px
.pf-v6-c-label--pf-v6-c-label--m-outline--BackgroundColor
transparent
.pf-v6-c-label--pf-v6-c-label--m-outline--Color
(In light theme) #151515
.pf-v6-c-label--pf-v6-c-label--m-outline__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor
transparent
.pf-v6-c-label--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth
2px
.pf-v6-c-label--pf-v6-c-label--m-outline--m-clickable--hover--Color
(In light theme) #151515
.pf-v6-c-label--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label--pf-v6-c-label--m-overflow--Color
(In light theme) #0066cc
.pf-v6-c-label--pf-v6-c-label--m-overflow--BackgroundColor
(In light theme) rgba(255, 255, 255, 0.0000)
.pf-v6-c-label--pf-v6-c-label--m-overflow--hover--Color
(In light theme) #004d99
.pf-v6-c-label--pf-v6-c-label--m-overflow--hover--BackgroundColor
(In light theme) rgba(199, 199, 199, 0.2500)
.pf-v6-c-label--pf-v6-c-label--m-add--Color
(In light theme) #0066cc
.pf-v6-c-label--pf-v6-c-label--m-add--BackgroundColor
transparent
.pf-v6-c-label--pf-v6-c-label--m-add--BorderColor
(In light theme) #c7c7c7
.pf-v6-c-label--pf-v6-c-label--m-add--BorderWidth
1px
.pf-v6-c-label--pf-v6-c-label--m-add--hover--Color
(In light theme) #004d99
.pf-v6-c-label--pf-v6-c-label--m-add--hover--BackgroundColor
transparent
.pf-v6-c-label--pf-v6-c-label--m-add--hover--BorderColor
(In light theme) #4394e5
.pf-v6-c-label--pf-v6-c-label--m-add--hover--BorderWidth
2px
.pf-v6-c-label--pf-v6-c-label--m-compact--PaddingBlockStart
0
.pf-v6-c-label--pf-v6-c-label--m-compact--PaddingInlineEnd
0.5rem
.pf-v6-c-label--pf-v6-c-label--m-compact--PaddingBlockEnd
0
.pf-v6-c-label--pf-v6-c-label--m-compact--PaddingInlineStart
0.5rem
.pf-v6-c-label--pf-v6-c-label--m-compact--FontSize
0.75rem
.pf-v6-c-label--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset
0.0625rem
.pf-v6-c-label--pf-v6-c-label__content--MaxWidth
100%
.pf-v6-c-label--pf-v6-c-label__content--Gap
0.25rem
.pf-v6-c-label--pf-v6-c-label__content--Cursor
initial
.pf-v6-c-label--pf-v6-c-label__icon--FontSize
0.75rem
.pf-v6-c-label--pf-v6-c-label__text--MaxWidth
100%
.pf-v6-c-label--pf-v6-c-label__actions--MarginInlineEnd
calc(0.25rem * -1)
.pf-v6-c-label--pf-v6-c-label__actions--c-button--FontSize
0.75rem
.pf-v6-c-label--pf-v6-c-label__actions--c-button--OutlineOffset
-0.1875rem
.pf-v6-c-label--pf-v6-c-label__actions--c-button--MarginBlockStart
calc(0.25rem * -1)
.pf-v6-c-label--pf-v6-c-label__actions--c-button--MarginBlockEnd
calc(0.25rem * -1)
.pf-v6-c-label--pf-v6-c-label__actions--c-button--PaddingBlockStart
0.25rem
.pf-v6-c-label--pf-v6-c-label__actions--c-button--PaddingInlineEnd
0.25rem
.pf-v6-c-label--pf-v6-c-label__actions--c-button--PaddingBlockEnd
0.25rem
.pf-v6-c-label--pf-v6-c-label__actions--c-button--PaddingInlineStart
0.25rem
.pf-v6-c-label--pf-v6-c-label--m-editable--TextDecorationLine
underline
.pf-v6-c-label--pf-v6-c-label--m-editable--TextDecorationStyle
dashed
.pf-v6-c-label--pf-v6-c-label--m-editable--hover--TextDecorationLine
underline
.pf-v6-c-label--pf-v6-c-label--m-editable--hover--TextDecorationStyle
dashed
.pf-v6-c-label--pf-v6-c-label--m-editable--TextUnderlineOffset
0.25rem
.pf-v6-c-label--pf-v6-c-label--m-editable__content--MaxWidth
16ch
.pf-v6-c-label--pf-v6-c-label--m-editable__content--Cursor
pointer
.pf-v6-c-label--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine
none
.pf-v6-c-label--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor
transparent
.pf-v6-c-label--pf-v6-c-label--m-editable--m-editable-active--Color
(In light theme) #151515
.pf-v6-c-label--pf-v6-c-label--m-editable--m-editable-active__content--Cursor
initial
.pf-v6-c-label--pf-v6-c-label--m-disabled--BackgroundColor
(In light theme) #c7c7c7
.pf-v6-c-label--pf-v6-c-label--m-disabled--Color
(In light theme) #4d4d4d
.pf-v6-c-label--pf-v6-c-label--m-disabled__icon--Color
(In light theme) #4d4d4d
.pf-v6-c-label--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color
(In light theme) #4d4d4d
.pf-v6-c-label.pf-m-blue--pf-v6-c-label--BackgroundColor
(In light theme) #b9dafc
.pf-v6-c-label.pf-m-blue--pf-v6-c-label--Color
(In light theme) #151515
.pf-v6-c-label.pf-m-blue--pf-v6-c-label__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label.pf-m-blue--pf-v6-c-label--m-clickable--hover--BackgroundColor
(In light theme) #92c5f9
.pf-v6-c-label.pf-m-blue--pf-v6-c-label--m-clickable--hover--Color
(In light theme) #151515
.pf-v6-c-label.pf-m-blue--pf-v6-c-label--m-clickable--hover__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label.pf-m-blue--pf-v6-c-label--m-outline--BorderColor
(In light theme) #92c5f9
.pf-v6-c-label.pf-m-blue--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor
(In light theme) #4394e5
.pf-v6-c-label.pf-m-red--pf-v6-c-label--BackgroundColor
(In light theme) #fbc5c5
.pf-v6-c-label.pf-m-red--pf-v6-c-label--Color
(In light theme) #151515
.pf-v6-c-label.pf-m-red--pf-v6-c-label__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label.pf-m-red--pf-v6-c-label--m-clickable--hover--BackgroundColor
(In light theme) #f9a8a8
.pf-v6-c-label.pf-m-red--pf-v6-c-label--m-clickable--hover--Color
(In light theme) #151515
.pf-v6-c-label.pf-m-red--pf-v6-c-label--m-clickable--hover__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label.pf-m-red--pf-v6-c-label--m-outline--BorderColor
(In light theme) #f9a8a8
.pf-v6-c-label.pf-m-red--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor
(In light theme) #f56e6e
.pf-v6-c-label.pf-m-orange--pf-v6-c-label--BackgroundColor
(In light theme) #fccb8f
.pf-v6-c-label.pf-m-orange--pf-v6-c-label--Color
(In light theme) #151515
.pf-v6-c-label.pf-m-orange--pf-v6-c-label__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label.pf-m-orange--pf-v6-c-label--m-clickable--hover--BackgroundColor
(In light theme) #f8ae54
.pf-v6-c-label.pf-m-orange--pf-v6-c-label--m-clickable--hover--Color
(In light theme) #151515
.pf-v6-c-label.pf-m-orange--pf-v6-c-label--m-clickable--hover__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label.pf-m-orange--pf-v6-c-label--m-outline--BorderColor
(In light theme) #f8ae54
.pf-v6-c-label.pf-m-orange--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor
(In light theme) #f5921b
.pf-v6-c-label.pf-m-orangered--pf-v6-c-label--BackgroundColor
(In light theme) #fbbea8
.pf-v6-c-label.pf-m-orangered--pf-v6-c-label--Color
(In light theme) #151515
.pf-v6-c-label.pf-m-orangered--pf-v6-c-label__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label.pf-m-orangered--pf-v6-c-label--m-clickable--hover--BackgroundColor
(In light theme) #f89b78
.pf-v6-c-label.pf-m-orangered--pf-v6-c-label--m-clickable--hover--Color
(In light theme) #151515
.pf-v6-c-label.pf-m-orangered--pf-v6-c-label--m-clickable--hover__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label.pf-m-orangered--pf-v6-c-label--m-outline--BorderColor
(In light theme) #f89b78
.pf-v6-c-label.pf-m-orangered--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor
(In light theme) #f4784a
.pf-v6-c-label.pf-m-yellow--pf-v6-c-label--BackgroundColor
(In light theme) #ffe072
.pf-v6-c-label.pf-m-yellow--pf-v6-c-label--Color
(In light theme) #151515
.pf-v6-c-label.pf-m-yellow--pf-v6-c-label__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label.pf-m-yellow--pf-v6-c-label--m-clickable--hover--BackgroundColor
(In light theme) #ffcc17
.pf-v6-c-label.pf-m-yellow--pf-v6-c-label--m-clickable--hover--Color
(In light theme) #151515
.pf-v6-c-label.pf-m-yellow--pf-v6-c-label--m-clickable--hover__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label.pf-m-yellow--pf-v6-c-label--m-outline--BorderColor
(In light theme) #ffcc17
.pf-v6-c-label.pf-m-yellow--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor
(In light theme) #dca614
.pf-v6-c-label.pf-m-green--pf-v6-c-label--BackgroundColor
(In light theme) #d1f1bb
.pf-v6-c-label.pf-m-green--pf-v6-c-label--Color
(In light theme) #151515
.pf-v6-c-label.pf-m-green--pf-v6-c-label__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label.pf-m-green--pf-v6-c-label--m-clickable--hover--BackgroundColor
(In light theme) #afdc8f
.pf-v6-c-label.pf-m-green--pf-v6-c-label--m-clickable--hover--Color
(In light theme) #151515
.pf-v6-c-label.pf-m-green--pf-v6-c-label--m-clickable--hover__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label.pf-m-green--pf-v6-c-label--m-outline--BorderColor
(In light theme) #afdc8f
.pf-v6-c-label.pf-m-green--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor
(In light theme) #87bb62
.pf-v6-c-label.pf-m-teal--pf-v6-c-label--BackgroundColor
(In light theme) #b9e5e5
.pf-v6-c-label.pf-m-teal--pf-v6-c-label--Color
(In light theme) #151515
.pf-v6-c-label.pf-m-teal--pf-v6-c-label__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label.pf-m-teal--pf-v6-c-label--m-clickable--hover--BackgroundColor
(In light theme) #9ad8d8
.pf-v6-c-label.pf-m-teal--pf-v6-c-label--m-clickable--hover--Color
(In light theme) #151515
.pf-v6-c-label.pf-m-teal--pf-v6-c-label--m-clickable--hover__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label.pf-m-teal--pf-v6-c-label--m-outline--BorderColor
(In light theme) #9ad8d8
.pf-v6-c-label.pf-m-teal--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor
(In light theme) #63bdbd
.pf-v6-c-label.pf-m-purple--pf-v6-c-label--BackgroundColor
(In light theme) #d0c5f4
.pf-v6-c-label.pf-m-purple--pf-v6-c-label--Color
(In light theme) #151515
.pf-v6-c-label.pf-m-purple--pf-v6-c-label__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label.pf-m-purple--pf-v6-c-label--m-clickable--hover--BackgroundColor
(In light theme) #b6a6e9
.pf-v6-c-label.pf-m-purple--pf-v6-c-label--m-clickable--hover--Color
(In light theme) #151515
.pf-v6-c-label.pf-m-purple--pf-v6-c-label--m-clickable--hover__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label.pf-m-purple--pf-v6-c-label--m-outline--BorderColor
(In light theme) #b6a6e9
.pf-v6-c-label.pf-m-purple--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor
(In light theme) #876fd4
.pf-v6-c-label.pf-m-success--pf-v6-c-label--BackgroundColor
(In light theme) #3d7317
.pf-v6-c-label.pf-m-success--pf-v6-c-label--Color
(In light theme) #ffffff
.pf-v6-c-label.pf-m-success--pf-v6-c-label__icon--Color
(In light theme) #ffffff
.pf-v6-c-label.pf-m-success--pf-v6-c-label--m-clickable--hover--BackgroundColor
(In light theme) #204d00
.pf-v6-c-label.pf-m-success--pf-v6-c-label--m-clickable--hover--Color
(In light theme) #ffffff
.pf-v6-c-label.pf-m-success--pf-v6-c-label--m-clickable--hover__icon--Color
(In light theme) #ffffff
.pf-v6-c-label.pf-m-success--pf-v6-c-label--m-outline__icon--Color
(In light theme) #3d7317
.pf-v6-c-label.pf-m-success--pf-v6-c-label--m-outline--BorderColor
(In light theme) #3d7317
.pf-v6-c-label.pf-m-success--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor
(In light theme) #204d00
.pf-v6-c-label.pf-m-success--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color
(In light theme) #204d00
.pf-v6-c-label.pf-m-warning--pf-v6-c-label--BackgroundColor
(In light theme) #ffcc17
.pf-v6-c-label.pf-m-warning--pf-v6-c-label--Color
(In light theme) #151515
.pf-v6-c-label.pf-m-warning--pf-v6-c-label__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label.pf-m-warning--pf-v6-c-label--m-clickable--hover--BackgroundColor
(In light theme) #dca614
.pf-v6-c-label.pf-m-warning--pf-v6-c-label--m-clickable--hover--Color
(In light theme) #151515
.pf-v6-c-label.pf-m-warning--pf-v6-c-label--m-clickable--hover__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label.pf-m-warning--pf-v6-c-label--m-outline__icon--Color
(In light theme) #dca614
.pf-v6-c-label.pf-m-warning--pf-v6-c-label--m-outline--BorderColor
(In light theme) #dca614
.pf-v6-c-label.pf-m-warning--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor
(In light theme) #b98412
.pf-v6-c-label.pf-m-warning--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color
(In light theme) #b98412
.pf-v6-c-label.pf-m-danger--pf-v6-c-label--BackgroundColor
(In light theme) #b1380b
.pf-v6-c-label.pf-m-danger--pf-v6-c-label--Color
(In light theme) #ffffff
.pf-v6-c-label.pf-m-danger--pf-v6-c-label__icon--Color
(In light theme) #ffffff
.pf-v6-c-label.pf-m-danger--pf-v6-c-label--m-clickable--hover--BackgroundColor
(In light theme) #731f00
.pf-v6-c-label.pf-m-danger--pf-v6-c-label--m-clickable--hover--Color
(In light theme) #ffffff
.pf-v6-c-label.pf-m-danger--pf-v6-c-label--m-clickable--hover__icon--Color
(In light theme) #ffffff
.pf-v6-c-label.pf-m-danger--pf-v6-c-label--m-outline__icon--Color
(In light theme) #b1380b
.pf-v6-c-label.pf-m-danger--pf-v6-c-label--m-outline--BorderColor
(In light theme) #b1380b
.pf-v6-c-label.pf-m-danger--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor
(In light theme) #731f00
.pf-v6-c-label.pf-m-danger--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color
(In light theme) #731f00
.pf-v6-c-label.pf-m-info--pf-v6-c-label--BackgroundColor
(In light theme) #5e40be
.pf-v6-c-label.pf-m-info--pf-v6-c-label--Color
(In light theme) #ffffff
.pf-v6-c-label.pf-m-info--pf-v6-c-label__icon--Color
(In light theme) #ffffff
.pf-v6-c-label.pf-m-info--pf-v6-c-label--m-clickable--hover--BackgroundColor
(In light theme) #3d2785
.pf-v6-c-label.pf-m-info--pf-v6-c-label--m-clickable--hover--Color
(In light theme) #ffffff
.pf-v6-c-label.pf-m-info--pf-v6-c-label--m-clickable--hover__icon--Color
(In light theme) #ffffff
.pf-v6-c-label.pf-m-info--pf-v6-c-label--m-outline__icon--Color
(In light theme) #5e40be
.pf-v6-c-label.pf-m-info--pf-v6-c-label--m-outline--BorderColor
(In light theme) #5e40be
.pf-v6-c-label.pf-m-info--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor
(In light theme) #3d2785
.pf-v6-c-label.pf-m-info--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color
(In light theme) #3d2785
.pf-v6-c-label.pf-m-custom--pf-v6-c-label--BackgroundColor
(In light theme) #147878
.pf-v6-c-label.pf-m-custom--pf-v6-c-label--Color
(In light theme) #ffffff
.pf-v6-c-label.pf-m-custom--pf-v6-c-label__icon--Color
(In light theme) #ffffff
.pf-v6-c-label.pf-m-custom--pf-v6-c-label--m-clickable--hover--BackgroundColor
(In light theme) #004d4d
.pf-v6-c-label.pf-m-custom--pf-v6-c-label--m-clickable--hover--Color
(In light theme) #ffffff
.pf-v6-c-label.pf-m-custom--pf-v6-c-label--m-clickable--hover__icon--Color
(In light theme) #ffffff
.pf-v6-c-label.pf-m-custom--pf-v6-c-label--m-outline__icon--Color
(In light theme) #147878
.pf-v6-c-label.pf-m-custom--pf-v6-c-label--m-outline--BorderColor
(In light theme) #147878
.pf-v6-c-label.pf-m-custom--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor
(In light theme) #004d4d
.pf-v6-c-label.pf-m-custom--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color
(In light theme) #204d00
.pf-v6-c-label.pf-m-compact--pf-v6-c-label--PaddingBlockStart
0
.pf-v6-c-label.pf-m-compact--pf-v6-c-label--PaddingInlineEnd
0.5rem
.pf-v6-c-label.pf-m-compact--pf-v6-c-label--PaddingBlockEnd
0
.pf-v6-c-label.pf-m-compact--pf-v6-c-label--PaddingInlineStart
0.5rem
.pf-v6-c-label.pf-m-compact--pf-v6-c-label--FontSize
0.75rem
.pf-v6-c-label.pf-m-compact--pf-v6-c-label--m-editable--TextUnderlineOffset
0.0625rem
.pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button--pf-v6-c-button__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label.pf-m-outline--pf-v6-c-label--Color
(In light theme) #151515
.pf-v6-c-label.pf-m-outline--pf-v6-c-label--BorderWidth
1px
.pf-v6-c-label.pf-m-outline--pf-v6-c-label--BorderColor
(In light theme) #c7c7c7
.pf-v6-c-label.pf-m-outline--pf-v6-c-label--BackgroundColor
transparent
.pf-v6-c-label.pf-m-outline--pf-v6-c-label__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label.pf-m-outline--pf-v6-c-label--m-clickable--hover--BackgroundColor
transparent
.pf-v6-c-label.pf-m-outline--pf-v6-c-label--m-clickable--hover--BorderWidth
2px
.pf-v6-c-label.pf-m-outline--pf-v6-c-label--m-clickable--hover--BorderColor
(In light theme) #a3a3a3
.pf-v6-c-label.pf-m-outline--pf-v6-c-label--m-clickable--hover--Color
(In light theme) #151515
.pf-v6-c-label.pf-m-outline--pf-v6-c-label--m-clickable--hover__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label.pf-m-editable--pf-v6-c-label__content--MaxWidth
16ch
.pf-v6-c-label.pf-m-editable--pf-v6-c-label__content--Cursor
pointer
.pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus)--pf-v6-c-label--m-editable--TextDecorationLine
underline
.pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus)--pf-v6-c-label--m-editable--TextDecorationStyle
dashed
.pf-v6-c-label.pf-m-editable-active--pf-v6-c-label--m-editable--TextDecorationLine
none
.pf-v6-c-label.pf-m-editable-active--pf-v6-c-label--BackgroundColor
transparent
.pf-v6-c-label.pf-m-editable-active--pf-v6-c-label--Color
(In light theme) #151515
.pf-v6-c-label.pf-m-editable-active--pf-v6-c-label__content--Cursor
initial
.pf-v6-c-label.pf-m-overflow--pf-v6-c-label--Color
(In light theme) #0066cc
.pf-v6-c-label.pf-m-overflow--pf-v6-c-label--BackgroundColor
(In light theme) rgba(255, 255, 255, 0.0000)
.pf-v6-c-label.pf-m-overflow:is(:hover, :focus)--pf-v6-c-label--m-overflow--Color
(In light theme) #004d99
.pf-v6-c-label.pf-m-overflow:is(:hover, :focus)--pf-v6-c-label--m-overflow--BackgroundColor
(In light theme) rgba(199, 199, 199, 0.2500)
.pf-v6-c-label.pf-m-add--pf-v6-c-label--Color
(In light theme) #0066cc
.pf-v6-c-label.pf-m-add--pf-v6-c-label--BackgroundColor
transparent
.pf-v6-c-label.pf-m-add--pf-v6-c-label--BorderColor
(In light theme) #c7c7c7
.pf-v6-c-label.pf-m-add--pf-v6-c-label--BorderWidth
1px
.pf-v6-c-label.pf-m-add:is(:hover, :focus)--pf-v6-c-label--m-add--Color
(In light theme) #004d99
.pf-v6-c-label.pf-m-add:is(:hover, :focus)--pf-v6-c-label--m-add--BackgroundColor
transparent
.pf-v6-c-label.pf-m-add:is(:hover, :focus)--pf-v6-c-label--m-add--BorderColor
(In light theme) #4394e5
.pf-v6-c-label.pf-m-add:is(:hover, :focus)--pf-v6-c-label--m-add--BorderWidth
2px
.pf-v6-c-label.pf-m-clickable--pf-v6-c-label__content--Cursor
pointer
.pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus)--pf-v6-c-label--Color
(In light theme) #151515
.pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus)--pf-v6-c-label__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus)--pf-v6-c-label--BackgroundColor
(In light theme) #c7c7c7
.pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus)--pf-v6-c-label--BorderWidth
0
.pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus)--pf-v6-c-label--BorderColor
transparent
.pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus)--pf-v6-c-label--m-outline--BorderWidth
2px
.pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus)--pf-v6-c-label--m-outline--BorderColor
(In light theme) #a3a3a3
.pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button--pf-v6-c-label--m-filled__actions--c-button__icon--Color
(In light theme) #1f1f1f
.pf-v6-c-label.pf-m-disabled--pf-v6-c-label--BackgroundColor
(In light theme) #c7c7c7
.pf-v6-c-label.pf-m-disabled--pf-v6-c-label--Color
(In light theme) #4d4d4d
.pf-v6-c-label.pf-m-disabled--pf-v6-c-label__icon--Color
(In light theme) #4d4d4d
.pf-v6-c-label.pf-m-disabled--pf-v6-c-label--BorderWidth
0
.pf-v6-c-label.pf-m-disabled .pf-v6-c-button--pf-v6-c-button--m-plain--disabled__icon--Color
(In light theme) #4d4d4d
.pf-v6-c-label__actions .pf-v6-c-button--pf-v6-c-button--FontSize
0.75rem
.pf-v6-c-label__actions .pf-v6-c-button--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart
0.25rem
.pf-v6-c-label__actions .pf-v6-c-button--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd
0.25rem
.pf-v6-c-label__actions .pf-v6-c-button--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd
0.25rem
.pf-v6-c-label__actions .pf-v6-c-button--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart
0.25rem

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

Expand or collapse columnSelectorVariableValue
.pf-v6-c-label-group--pf-v6-c-label-group--RowGap
0.5rem
.pf-v6-c-label-group--pf-v6-c-label-group--ColumnGap
0.25rem
.pf-v6-c-label-group--pf-v6-c-label-group--m-vertical--RowGap
0.5rem
.pf-v6-c-label-group--pf-v6-c-label-group--m-vertical--ColumnGap
0.5rem
.pf-v6-c-label-group--pf-v6-c-label-group__main--RowGap
0.25rem
.pf-v6-c-label-group--pf-v6-c-label-group__main--ColumnGap
0.5rem
.pf-v6-c-label-group--pf-v6-c-label-group--m-vertical__main--RowGap
0.5rem
.pf-v6-c-label-group--pf-v6-c-label-group--m-vertical__main--ColumnGap
0.25rem
.pf-v6-c-label-group--pf-v6-c-label-group__list--RowGap
0.25rem
.pf-v6-c-label-group--pf-v6-c-label-group__list--ColumnGap
0.25rem
.pf-v6-c-label-group--pf-v6-c-label-group--m-vertical__list--RowGap
0.25rem
.pf-v6-c-label-group--pf-v6-c-label-group--m-vertical__list--ColumnGap
0.25rem
.pf-v6-c-label-group--pf-v6-c-label-group--m-category--PaddingBlockStart
0.25rem
.pf-v6-c-label-group--pf-v6-c-label-group--m-category--PaddingInlineEnd
0.5rem
.pf-v6-c-label-group--pf-v6-c-label-group--m-category--PaddingBlockEnd
0.25rem
.pf-v6-c-label-group--pf-v6-c-label-group--m-category--PaddingInlineStart
0.5rem
.pf-v6-c-label-group--pf-v6-c-label-group--m-category--BorderRadius
6px
.pf-v6-c-label-group--pf-v6-c-label-group--m-category--BorderWidth
1px
.pf-v6-c-label-group--pf-v6-c-label-group--m-category--BorderColor
(In light theme) #c7c7c7
.pf-v6-c-label-group--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd
0.5rem
.pf-v6-c-label-group--pf-v6-c-label-group__label--MaxWidth
18ch
.pf-v6-c-label-group--pf-v6-c-label-group__close--c-button--FontSize
0.75rem
.pf-v6-c-label-group--pf-v6-c-label-group__close--c-button--PaddingBlockStart
0.25rem
.pf-v6-c-label-group--pf-v6-c-label-group__close--c-button--PaddingInlineEnd
0.5rem
.pf-v6-c-label-group--pf-v6-c-label-group__close--c-button--PaddingBlockEnd
0.25rem
.pf-v6-c-label-group--pf-v6-c-label-group__close--c-button--PaddingInlineStart
0.5rem
.pf-v6-c-label-group--pf-v6-c-label-group__textarea--MinWidth
12.5rem
.pf-v6-c-label-group--pf-v6-c-label-group__textarea--PaddingBlockStart
0.125rem
.pf-v6-c-label-group--pf-v6-c-label-group__textarea--PaddingInlineEnd
0.25rem
.pf-v6-c-label-group--pf-v6-c-label-group__textarea--PaddingBlockEnd
0
.pf-v6-c-label-group--pf-v6-c-label-group__textarea--PaddingInlineStart
0.25rem
.pf-v6-c-label-group.pf-m-vertical--pf-v6-c-label-group--RowGap
0.5rem
.pf-v6-c-label-group.pf-m-vertical--pf-v6-c-label-group--ColumnGap
0.5rem
.pf-v6-c-label-group.pf-m-vertical--pf-v6-c-label-group__main--RowGap
0.5rem
.pf-v6-c-label-group.pf-m-vertical--pf-v6-c-label-group__main--ColumnGap
0.25rem
.pf-v6-c-label-group.pf-m-vertical--pf-v6-c-label-group__list--RowGap
0.25rem
.pf-v6-c-label-group.pf-m-vertical--pf-v6-c-label-group__list--ColumnGap
0.25rem
.pf-v6-c-label-group.pf-m-vertical--pf-v6-c-label-group--m-category--PaddingInlineEnd
0.5rem
.pf-v6-c-label-group__close .pf-v6-c-button--pf-v6-c-button--FontSize
0.75rem
.pf-v6-c-label-group__close .pf-v6-c-button--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart
0.25rem
.pf-v6-c-label-group__close .pf-v6-c-button--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd
0.5rem
.pf-v6-c-label-group__close .pf-v6-c-button--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd
0.25rem
.pf-v6-c-label-group__close .pf-v6-c-button--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart
0.5rem

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines