Skip to content

Label

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

Examples

Filled labels

Non-status:

GreyGrey iconGrey removable Grey icon removable Grey link Grey link removable Grey label with icon that overflows Grey link removable (disabled)

Blue Blue icon Blue removable Blue icon removable Blue link Blue link removable Blue label with icon that overflows Blue link removable (disabled)

Green Green icon Green removable Green icon removable Green link Green link removable Green label with icon that overflows Green link removable (disabled)

Orange Orange icon Orange removable Orange icon removable Orange link Orange link removable Orange label with icon that overflows Orange link removable (disabled)

Red Red icon Red removable Red icon removable Red link Red link removable Red label with icon that overflows 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 with icon that overflows

Purple Purple icon Purple removable Purple icon removable Purple link Purple link removable Purple label with icon that overflows Purple link removable (disabled)

Teal Teal icon Teal removable Teal icon removable Teal link Teal link removable Teal label with icon that overflows Teal link removable (disabled)

Yellow Yellow icon Yellow removable Yellow icon removable Yellow link Yellow link removable Yellow label with icon that overflows Yellow link removable (disabled)

Label that overflows its parent, but has no textMaxWidth on its own

Status:

Success Success removable Success link Success link removable Success label with text that overflows

Warning Warning removable Warning link Warning link removable Warning label with text that overflows

Danger Danger removable Danger link Danger link removable Danger label with text that overflows

Info Info removable Info link Info link removable Info label with text that overflows

Custom Custom removable Custom link Custom link removable Custom label with text that overflows

Outlined labels

Non-status:

Grey Grey icon Grey removable Grey icon removable Grey link Grey link removable Grey label with icon that overflows Grey link removable (disabled)

Blue Blue icon Blue removable Blue icon removable Blue link Blue link removable Blue label with icon that overflows Blue link removable (disabled)

Green Green icon Green removable Green icon removable Green link Green link removable Green label with icon that overflows Green link removable (disabled)

Orange Orange icon Orange removable Orange icon removable Orange link Orange link removable Orange label with icon that overflows Orange link removable (disabled)

Red Red icon Red removable Red icon removable Red link Red link removable Red label with icon that overflows

Orange red Orange red icon Orange red removable Orange red icon removable Orange red link Orange red link removable Orange red label with icon that overflows

Purple Purple icon Purple removable Purple icon removable Purple link Purple link removable Purple label with icon that overflows Purple link removable (disabled)

Teal Teal icon Teal removable Teal icon removable Teal link Teal link removable Teal label with icon that overflows Teal link removable (disabled)

Yellow Yellow icon Yellow removable Yellow icon removable Yellow link Yellow link removable Yellow label with icon that overflows Yellow link removable (disabled)

Status:

Success Success removable Success link Success link removable Success label with text that overflows

Warning Warning removable Warning link Warning link removable Warning label with text that overflows

Danger Danger removable Danger link Danger link removable Danger label with text that overflows

Info Info removable Info link Info link removable Info label with text that overflows

Custom Custom removable Custom link Custom link removable Custom label with text that overflows

Compact labels

Compact Compact icon Compact removable Compact icon removable Compact link Compact link removable Compact label with icon that overflows Compact link removable (disabled) Compact icon Compact removable Compact icon removable Compact link Compact link removable Compact label with icon that overflows Compact link removable (disabled)

Label with router link

Editable labels

Click or press either enter or space to begin editing a label. After editing, click outside the label or press enter again to complete the edit. To cancel an edit, press escape.

You can also customize any Label's close button aria-label as this example shows with closeBtnAriaLabel.

Basic label group

Use a label group when you have multiple labels to display at once.

  • Label 1
  • Label 2
  • Label 3

Label group with overflow

An overflow label can be added to the end of a group to save space when the number of labels exceeds some threshold. Click the overflow label to expand and collapse the group.

  • Label 1
  • Label 2
  • Label 3

Label group with categories

Use a category name to organize a set of labels

  • Label 1
  • Label 2
  • Label 3

Label group with removable categories

  • Label 1
  • Label 2
  • Label 3

Vertical label group

Labels in a group can also be stacked vertically. This example shows a verical label group with a category name and overflow.

  • Label 1
  • Label 2
  • Label 3

Editable label group

  • Static label

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. For additional documentation that showcases adding a new label, see label demos.

  • Label 1
  • Label 2
  • Add label

Props

Label

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the label.
classNamestring''Additional classes added to the label.
closeBtnReact.ReactNodeNode for custom close button.
closeBtnAriaLabelstringAria label for close button
closeBtnPropsanyAdditional properties for the default close button.
color'blue' | 'teal' | 'green' | 'orange' | 'purple' | 'red' | 'orangered' | 'grey' | 'yellow''grey'Color of the label.
editablePropsanyAdditional props passed to the editable label text div. Optionally passing onInput and onBlur callbacks will allow finer custom text input control.
hrefstringHref for a label that is a link. If present, the label will change to an anchor element. This should not be passed in if the onClick prop is also passed in.
iconReact.ReactNodeIcon added to the left of the label text. Overrides the icon set by the status property.
isCompactbooleanfalseFlag indicating the label is compact.
isDisabledbooleanfalseFlag indicating the label is disabled. Works only on clickable labels, so either href or onClick props must be passed in.
isEditablebooleanfalseFlag indicating the label is editable.
onClick(event: React.MouseEvent) => voidCallback for when the label is clicked. This should not be passed in if the href or isEditable props are also passed in.
onClose(event: React.MouseEvent) => voidClose click callback for removable labels. If present, label will have a close button.
onEditCancel(event: KeyboardEvent, previousText: string) => voidCallback when an editable label cancels an edit.
onEditComplete(event: MouseEvent | KeyboardEvent, newText: string) => voidCallback when an editable label completes an edit.
render({ className, content, componentRef }: { className: string; content: React.ReactNode; componentRef: any; }) => React.ReactNodeForwards the label content and className to rendered function. Use this prop for react router support.
status'success' | 'warning' | 'danger' | 'info' | 'custom'Status of the label with a respective icon and color. Overrides the color set by the color property.
textMaxWidthstringThe max width of the label before it is truncated. Can be any valid CSS unit, such as '100%', '100px', or '16ch'.
tooltipPosition| TooltipPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end'Position of the tooltip which is displayed if text is truncated
variant'outline' | 'filled' | 'overflow' | 'add''filled'Variant of the label.

LabelGroup

*required
NameTypeDefaultDescription
addLabelControlReact.ReactNodeControl for adding new labels
aria-labelstring'Label group category'Aria label for label group that does not have a category name
categoryNamestring''Category name text for the label group category. If this prop is supplied the label group with have a label and category styling applied
childrenReact.ReactNodeContent rendered inside the label group. Should be <Label> elements.
classNamestringAdditional classes added to the label item
closeBtnAriaLabelstring'Close label group'Aria label for close button
collapsedTextstring'${remaining} more'Customizeable template string. Use variable "${remaining}" for the overflow label count.
defaultIsOpenbooleanfalseFlag for having the label group default to expanded
editableTextAreaPropsanyAdditional props passed to the editable textarea.
expandedTextstring'Show Less'Customizable "Show Less" text string
hasEditableTextAreabooleanfalseFlag indicating the editable label group should be appended with a textarea.
isClosablebooleanfalseFlag if label group can be closed
isCompactbooleanfalseFlag indicating the labels in the group are compact
isEditablebooleanfalseFlag indicating contained labels are editable. Allows spacing for a text input after the labels.
isVerticalbooleanfalseFlag to implement a vertical layout
numLabelsnumber3Set number of labels to show before overflow
onClick(event: React.MouseEvent) => void(_e: React.MouseEvent) => undefined as anyFunction that is called when clicking on the label group close button
tooltipPosition| TooltipPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end''top'Position of the tooltip which is displayed if the category name text is longer

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