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)
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)
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)
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)
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.
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
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 column | Selector | Variable | Value | |
---|---|---|---|---|
.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 column | Selector | Variable | Value | |
---|---|---|---|---|
.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 | ||
|