Examples
Documentation
Overview
Always add a modifier class to add color to the button.
Button vs link
Semantic buttons and links are important for usability as well as accessibility. Using an a instead of a button element to perform user initiated actions should be avoided, unless absolutely necessary.
Accessibility
Attribute | Applied to | Outcome |
|---|---|---|
aria-pressed="true or false" | .pf-v6-c-button | Indicates that the button is a toggle. When set to true, pf-m-active should also be set so that the button displays in an active state. Required when button is a toggle |
aria-label="[button label text]" | .pf-v6-c-button.pf-m-plain | Provides an accessible name for the button when an icon is used instead of text. Required when icon is used with no supporting text |
aria-label="[descriptive text]" | a.pf-v6-c-button, span.pf-v6-c-button.pf-m-link.pf-m-inline | The button component's text should adequately describe its purpose. If it does not, aria-label can provide more detailed interaction information. |
disabled | button.pf-v6-c-button | When a button element is used, indicates that it is unavailable and removes it from keyboard focus. Required when button is disabled |
aria-disabled=true | button.pf-v6-c-button | When a button element is used, indicates that it is unavailable but does not prevent keyboard or hover interactions. Used when a disabled button provides interactive elements like a tooltip. |
aria-disabled=true | a.pf-v6-c-button.pf-m-disabled, span.pf-v6-c-button.pf-m-link.pf-m-inline.pf-m-disabled | When a non-button element is used, indicates that it is unavailable. Required when element is disabled |
aria-expanded=true | .pf-v6-c-button.pf-m-expanded | Indicates that the expanded content element is visible. Required |
tabindex="-1" | a.pf-v6-c-button.pf-m-disabled, span.pf-v6-c-button.pf-m-link.pf-m-inline.pf-m-disabled | When a non-button element is used, removes it from keyboard focus. Required when element is disabled |
tabindex="0" | span.pf-v6-c-button.pf-m-link.pf-m-inline | Inserts the span into the tab order of the page so that it is focusable. Required when the element is a span |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v6-c-button | <button>, <span> | Initiates a button. Always use it with a modifier class. Required |
.pf-v6-c-button__icon | <span> | Initiates a button icon. |
.pf-v6-c-button__progress | <span> | Initiates a button progress container. |
.pf-v6-c-button__count | <span> | Initiates a button count container. Note: Count should only be used on link buttons. |
.pf-m-primary | .pf-v6-c-button | Modifies for primary styles. |
.pf-m-secondary | .pf-v6-c-button | Modifies for secondary styles. |
.pf-m-tertiary | .pf-v6-c-button | Modifies for tertiary styles. |
.pf-m-danger | .pf-v6-c-button | Modifies for danger styles. |
.pf-m-warning | .pf-v6-c-button | Modifies for warning styles. |
.pf-m-link | .pf-v6-c-button | Modifies for link styles. This button has no background or border and is styled as a link. This button would commonly appear in a form and may include an icon. |
.pf-m-plain | .pf-v6-c-button | Modifies for icon styles. This button has no background or border, uses a standard text color, and is used for .pf-m-plain icon buttons such as close, expand, kebab, etc. |
.pf-m-no-padding | .pf-v6-c-button.pf-m-plain | Modifies a plain button to remove padding. This modifier should only be used when the button is inline within a sentence or block of text. Adjacent plain buttons without padding should always have spacing between them. |
.pf-m-inline | .pf-v6-c-button.pf-m-link | Modifies for inline styles. This button is presented similar to a normal link and has no padding and is displayed inline with other inline content. When used as a <span>, the text will flow inline with text around it. |
.pf-m-block | .pf-v6-c-button | Creates a block level button. |
.pf-m-control | .pf-v6-c-button | Modifies for control styles. Note: This modifier should only be used when using buttons in the Input Group or Clipboard Copy components. |
.pf-m-expanded | .pf-v6-c-button.pf-m-control | Modifies a control button for the expanded state. |
.pf-m-start | .pf-v6-c-button__icon | Applies right spacing to an icon inside of a button when the icon comes before text. |
.pf-m-end | .pf-v6-c-button__icon | Applies left spacing to an icon inside of a button when the icon comes after text. |
.pf-m-active | .pf-v6-c-button | Forces display of the active state of the button. This modifier should be used when aria-pressed is set to true so that the button displays in an active state. |
.pf-m-small | .pf-v6-c-button | Modifies the button for small/compact styles. |
.pf-m-aria-disabled | .pf-v6-c-button | Modifies a button to be visually disabled, yet is still focusable. |
.pf-m-display-lg | .pf-v6-c-button, pf-v6-c-button.pf-m-link | Modifies the button and link button for large display styling. For example, use this modifier to achieve "call to action" styles. |
.pf-m-progress | .pf-v6-c-button | Indicates that the button supports the progress state. Note: Not used with the plain variation. |
.pf-m-in-progress | .pf-v6-c-button | Indicates that the button is in the in progress state. |
.pf-m-stateful | .pf-v6-c-button | Indicates that the button is used for one of read, unread, and attention states. Note: Always use with a modifier of .pf-m-read, .pf-m-unread, or .pf-m-attention. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v6-c-button | --pf-v6-c-button--Display | inline-flex | ||
| .pf-v6-c-button | --pf-v6-c-button--AlignItems | baseline | ||
| .pf-v6-c-button | --pf-v6-c-button--JustifyContent | center | ||
| .pf-v6-c-button | --pf-v6-c-button--Gap | 0.5rem | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--MinWidth | calc(1em * 1.5 + 0.25rem + 0.25rem) | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--PaddingBlockStart | 0.5rem | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--PaddingInlineEnd | 1.5rem | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--PaddingBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--PaddingInlineStart | 1.5rem | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--LineHeight | 1.5 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--FontWeight | 400 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--FontSize | 0.875rem | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--BackgroundColor | transparent | ||
| .pf-v6-c-button | --pf-v6-c-button--BorderColor | transparent | ||
| .pf-v6-c-button | --pf-v6-c-button--BorderWidth | 1px | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--BorderRadius | 999px | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--TextDecorationLine | none | ||
| .pf-v6-c-button | --pf-v6-c-button--TextDecorationStyle | none | ||
| .pf-v6-c-button | --pf-v6-c-button--TransitionDuration | 200ms | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--TransitionTimingFunction | cubic-bezier(.4, 0, .2, 1) | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--TransitionProperty | color, background-color, border-width, border-color, padding | ||
| .pf-v6-c-button | --pf-v6-c-button--hover--BackgroundColor | transparent | ||
| .pf-v6-c-button | --pf-v6-c-button--hover--BorderColor | transparent | ||
| .pf-v6-c-button | --pf-v6-c-button--hover--BorderWidth | 2px | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--hover--TextDecorationLine | none | ||
| .pf-v6-c-button | --pf-v6-c-button--hover--TextDecorationStyle | none | ||
| .pf-v6-c-button | --pf-v6-c-button--m-clicked--BackgroundColor | transparent | ||
| .pf-v6-c-button | --pf-v6-c-button--m-clicked--BorderColor | transparent | ||
| .pf-v6-c-button | --pf-v6-c-button--m-clicked--BorderWidth | 2px | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-primary--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-primary--BackgroundColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-primary__icon--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-primary--hover--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-primary--hover--BackgroundColor | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-primary--hover__icon--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-primary--m-clicked--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-primary--m-clicked--BackgroundColor | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-primary--m-clicked__icon--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-secondary--Color | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-secondary--BorderColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-secondary--TransitionDuration | 100ms | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-secondary__icon--Color | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-secondary--hover--Color | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-secondary--hover--BorderColor | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-secondary--hover__icon--Color | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-secondary--m-clicked--Color | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-secondary--m-clicked--BorderColor | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-secondary--m-clicked__icon--Color | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-secondary--m-danger--Color | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-secondary--m-danger--BorderColor | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-secondary--m-danger__icon--Color | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-secondary--m-danger--hover--Color | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-secondary--m-danger--hover--BorderColor | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-secondary--m-danger--hover__icon--Color | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-secondary--m-danger--m-clicked--Color | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-secondary--m-danger--m-clicked--BorderColor | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-secondary--m-danger--m-clicked__icon--Color | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-tertiary--Color | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-tertiary--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-tertiary--TransitionDuration | 100ms | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-tertiary__icon--Color | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-tertiary--hover--Color | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-tertiary--hover--BorderColor | (In light theme) #4394e5 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-tertiary--hover__icon--Color | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-tertiary--m-clicked--Color | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-tertiary--m-clicked--BorderColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-tertiary--m-clicked__icon--Color | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-link--BorderRadius | 6px | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-link--PaddingInlineEnd | 0.5rem | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-link--PaddingInlineStart | 0.5rem | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-link--Color | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-link--BackgroundColor | (In light theme) rgba(255, 255, 255, 0.0000) | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-link__icon--Color | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-link--hover--Color | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-link--hover--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-link--hover__icon--Color | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-link--m-clicked--Color | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-link--m-clicked--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-link--m-clicked__icon--Color | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-link--m-danger--Color | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-link--m-danger--BackgroundColor | (In light theme) rgba(255, 255, 255, 0.0000) | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-link--m-danger__icon--Color | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-link--m-danger--hover--Color | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-link--m-danger--hover--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-link--m-danger--hover__icon--Color | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-link--m-danger--m-clicked--Color | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-link--m-inline--Display | inline-flex | ||
| .pf-v6-c-button | --pf-v6-c-button--m-link--m-inline--JustifyContent | flex-start | ||
| .pf-v6-c-button | --pf-v6-c-button--m-link--m-inline--FontSize | initial | ||
| .pf-v6-c-button | --pf-v6-c-button--m-link--m-inline--LineHeight | initial | ||
| .pf-v6-c-button | --pf-v6-c-button--m-link--m-inline--FontWeight | initial | ||
| .pf-v6-c-button | --pf-v6-c-button--m-link--m-inline--PaddingBlockStart | 0 | ||
| .pf-v6-c-button | --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd | 0 | ||
| .pf-v6-c-button | --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd | 0 | ||
| .pf-v6-c-button | --pf-v6-c-button--m-link--m-inline--PaddingInlineStart | 0 | ||
| .pf-v6-c-button | --pf-v6-c-button--m-link--m-inline--TextDecorationLine | underline | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-link--m-inline--TextDecorationStyle | solid | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine | underline | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle | solid | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart | 0.25rem | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart | calc(0.25rem + 1rem + 0.5rem) | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-link--m-inline--disabled--Color | (In light theme) #a3a3a3 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-link--m-inline--disabled__icon--Color | (In light theme) #a3a3a3 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--span--m-link--m-inline--Display | inline | ||
| .pf-v6-c-button | --pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd | 0.5rem | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart | 0.5rem | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-plain--BorderRadius | 6px | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-plain--PaddingInlineEnd | 0.5rem | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-plain--PaddingInlineStart | 0.5rem | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-plain--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-plain__icon--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-plain--BackgroundColor | (In light theme) rgba(255, 255, 255, 0.0000) | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-plain--hover--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-plain--hover--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-plain--m-clicked--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-plain--m-clicked--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-plain--disabled--Color | (In light theme) #a3a3a3 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-plain--disabled__icon--Color | (In light theme) #a3a3a3 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-plain--disabled--BackgroundColor | transparent | ||
| .pf-v6-c-button | --pf-v6-c-button--m-plain--m-small--PaddingInlineEnd | 0.25rem | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-plain--m-small--PaddingInlineStart | 0.25rem | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-plain--m-no-padding--MinWidth | auto | ||
| .pf-v6-c-button | --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart | 0 | ||
| .pf-v6-c-button | --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd | 0 | ||
| .pf-v6-c-button | --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd | 0 | ||
| .pf-v6-c-button | --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart | 0 | ||
| .pf-v6-c-button | --pf-v6-c-button--m-plain--m-no-padding__icon--Color | (In light theme) #707070 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-plain--m-no-padding--BackgroundColor | transparent | ||
| .pf-v6-c-button | --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor | transparent | ||
| .pf-v6-c-button | --pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor | transparent | ||
| .pf-v6-c-button | --pf-v6-c-button__progress--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-control--BorderRadius | 6px | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-control--PaddingInlineStart | 1rem | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-control--PaddingInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-control--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-control--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-control--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-control--BorderWidth | 1px | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-control__icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-control--hover--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-control--hover--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-control--hover--BorderColor | (In light theme) #4394e5 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-control--hover--BorderWidth | 1px | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-control--hover__icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-control--m-clicked--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-control--m-clicked--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-control--m-clicked--BorderColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-control--m-clicked--BorderWidth | 2px | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-control--m-clicked__icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-stateful--BorderRadius | 6px | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-stateful--PaddingInlineStart | 1rem | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-stateful--PaddingInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-read--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-read--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-read--hover--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-read--hover--BorderColor | (In light theme) #4394e5 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-read--m-clicked--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-read--m-clicked--BorderColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-unread--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-unread--BackgroundColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-unread__icon--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-unread--hover--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-unread--hover--BackgroundColor | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-unread--hover__icon--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-unread--m-clicked--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-unread--m-clicked--BackgroundColor | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-unread--m-clicked__icon--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-attention--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-attention--BackgroundColor | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-attention__icon--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-attention--hover--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-attention--hover--BackgroundColor | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-attention--hover__icon--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-attention--m-clicked--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-attention--m-clicked--BackgroundColor | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-attention--m-clicked__icon--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-warning--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-warning--BackgroundColor | (In light theme) #ffcc17 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-warning__icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-warning--hover--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-warning--hover--BackgroundColor | (In light theme) #dca614 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-warning--hover__icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-warning--m-clicked--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-warning--m-clicked--BackgroundColor | (In light theme) #dca614 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-warning--m-clicked__icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-danger--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-danger--BackgroundColor | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-danger__icon--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-danger--hover--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-danger--hover--BackgroundColor | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-danger--hover__icon--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-danger--m-clicked--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-danger--m-clicked--BackgroundColor | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-danger--m-clicked__icon--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-display-lg--PaddingBlockStart | 1rem | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-display-lg--PaddingInlineEnd | 2rem | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-display-lg--PaddingBlockEnd | 1rem | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-display-lg--PaddingInlineStart | 2rem | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-display-lg--FontWeight | 500 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-link--m-display-lg--FontSize | 1rem | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-small--PaddingBlockStart | 0.25rem | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-small--PaddingInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-small--PaddingBlockEnd | 0.25rem | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-small--PaddingInlineStart | 1rem | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--disabled--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--disabled--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--disabled--BorderColor | transparent | ||
| .pf-v6-c-button | --pf-v6-c-button--disabled__icon--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button__icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--hover__icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-clicked__icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button__icon--MarginInlineStart | 0 | ||
| .pf-v6-c-button | --pf-v6-c-button__icon--MarginInlineEnd | 0 | ||
| .pf-v6-c-button | --pf-v6-c-button__icon--m-start--MarginInlineEnd | 0 | ||
| .pf-v6-c-button | --pf-v6-c-button__icon--m-end--MarginInlineStart | 0 | ||
| .pf-v6-c-button | --pf-v6-c-button__progress--width | calc(1rem + 0.5rem) | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button__progress--Opacity | 0 | ||
| .pf-v6-c-button | --pf-v6-c-button__progress--TranslateY | -50% | ||
| .pf-v6-c-button | --pf-v6-c-button__progress--TranslateX | 0 | ||
| .pf-v6-c-button | --pf-v6-c-button__progress--InsetBlockStart | 50% | ||
| .pf-v6-c-button | --pf-v6-c-button__progress--InsetInlineStart | 1rem | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-progress--PaddingInlineEnd | calc(1rem + calc(1rem + 0.5rem) / 2) | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-progress--PaddingInlineStart | calc(1rem + calc(1rem + 0.5rem) / 2) | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-in-progress--PaddingInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-in-progress--PaddingInlineStart | calc(1rem + calc(1rem + 0.5rem)) | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-in-progress--m-plain--Color | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart | 50% | ||
| .pf-v6-c-button | --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX | -50% | ||
| .pf-v6-c-button | --pf-v6-c-button--m-primary__c-badge--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-button | --pf-v6-c-button--m-block--Display | flex | ||
| .pf-v6-c-button | --pf-v6-c-button--m-block--Width | 100% | ||
| .pf-v6-c-button.pf-m-primary | --pf-v6-c-button--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button.pf-m-primary | --pf-v6-c-button--BackgroundColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-button.pf-m-primary | --pf-v6-c-button__icon--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button.pf-m-primary | --pf-v6-c-button--hover--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button.pf-m-primary | --pf-v6-c-button--hover--BackgroundColor | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button.pf-m-primary | --pf-v6-c-button--hover__icon--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button.pf-m-primary | --pf-v6-c-button--m-clicked--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button.pf-m-primary | --pf-v6-c-button--m-clicked--BackgroundColor | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button.pf-m-primary | --pf-v6-c-button--m-clicked__icon--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button.pf-m-primary .pf-v6-c-badge.pf-m-unread | --pf-v6-c-badge--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-button.pf-m-secondary | --pf-v6-c-button--Color | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-button.pf-m-secondary | --pf-v6-c-button--BorderColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-button.pf-m-secondary | --pf-v6-c-button--TransitionDuration | 100ms | ||
| ||||
| .pf-v6-c-button.pf-m-secondary | --pf-v6-c-button__icon--Color | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-button.pf-m-secondary | --pf-v6-c-button--hover--Color | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button.pf-m-secondary | --pf-v6-c-button--hover--BorderColor | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button.pf-m-secondary | --pf-v6-c-button--hover__icon--Color | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button.pf-m-secondary | --pf-v6-c-button--m-clicked--Color | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button.pf-m-secondary | --pf-v6-c-button--m-clicked--BorderColor | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button.pf-m-secondary | --pf-v6-c-button--m-clicked__icon--Color | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button.pf-m-secondary | --pf-v6-c-button--m-danger--Color | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-button.pf-m-secondary | --pf-v6-c-button--m-danger__icon--Color | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-button.pf-m-secondary | --pf-v6-c-button--m-danger--hover--Color | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-button.pf-m-secondary | --pf-v6-c-button--m-danger--hover__icon--Color | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-button.pf-m-secondary | --pf-v6-c-button--m-danger--m-clicked--Color | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-button.pf-m-secondary | --pf-v6-c-button--m-danger--m-clicked__icon--Color | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-button.pf-m-secondary.pf-m-danger | --pf-v6-c-button--m-secondary--BorderColor | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-button.pf-m-secondary.pf-m-danger | --pf-v6-c-button--m-secondary--hover--BorderColor | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-button.pf-m-secondary.pf-m-danger | --pf-v6-c-button--m-secondary--m-clicked--BorderColor | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-button.pf-m-secondary.pf-m-danger | --pf-v6-c-button--m-danger--BackgroundColor | transparent | ||
| .pf-v6-c-button.pf-m-secondary.pf-m-danger | --pf-v6-c-button--m-danger--hover--BackgroundColor | transparent | ||
| .pf-v6-c-button.pf-m-secondary.pf-m-danger | --pf-v6-c-button--m-danger--m-clicked--BackgroundColor | transparent | ||
| .pf-v6-c-button.pf-m-tertiary | --pf-v6-c-button--Color | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-button.pf-m-tertiary | --pf-v6-c-button--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-button.pf-m-tertiary | --pf-v6-c-button--TransitionDuration | 100ms | ||
| ||||
| .pf-v6-c-button.pf-m-tertiary | --pf-v6-c-button__icon--Color | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-button.pf-m-tertiary | --pf-v6-c-button--hover--Color | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button.pf-m-tertiary | --pf-v6-c-button--hover--BorderColor | (In light theme) #4394e5 | ||
| ||||
| .pf-v6-c-button.pf-m-tertiary | --pf-v6-c-button--hover__icon--Color | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button.pf-m-tertiary | --pf-v6-c-button--m-clicked--Color | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button.pf-m-tertiary | --pf-v6-c-button--m-clicked--BorderColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-button.pf-m-tertiary | --pf-v6-c-button--m-clicked__icon--Color | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button.pf-m-link | --pf-v6-c-button--PaddingInlineEnd | 0.5rem | ||
| ||||
| .pf-v6-c-button.pf-m-link | --pf-v6-c-button--PaddingInlineStart | 0.5rem | ||
| ||||
| .pf-v6-c-button.pf-m-link | --pf-v6-c-button--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-button.pf-m-link | --pf-v6-c-button--BorderRadius | 6px | ||
| ||||
| .pf-v6-c-button.pf-m-link | --pf-v6-c-button--BackgroundColor | (In light theme) rgba(255, 255, 255, 0.0000) | ||
| ||||
| .pf-v6-c-button.pf-m-link | --pf-v6-c-button__icon--Color | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-button.pf-m-link | --pf-v6-c-button--hover--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-button.pf-m-link | --pf-v6-c-button--hover--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
| .pf-v6-c-button.pf-m-link | --pf-v6-c-button--hover__icon--Color | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button.pf-m-link | --pf-v6-c-button--m-clicked--Color | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button.pf-m-link | --pf-v6-c-button--m-clicked--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
| .pf-v6-c-button.pf-m-link | --pf-v6-c-button--m-clicked__icon--Color | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button.pf-m-link.pf-m-inline | --pf-v6-c-button--Display | inline-flex | ||
| ||||
| .pf-v6-c-button.pf-m-link.pf-m-inline | --pf-v6-c-button--JustifyContent | flex-start | ||
| ||||
| .pf-v6-c-button.pf-m-link.pf-m-inline | --pf-v6-c-button--FontSize | initial | ||
| ||||
| .pf-v6-c-button.pf-m-link.pf-m-inline | --pf-v6-c-button--LineHeight | initial | ||
| ||||
| .pf-v6-c-button.pf-m-link.pf-m-inline | --pf-v6-c-button--FontWeight | initial | ||
| ||||
| .pf-v6-c-button.pf-m-link.pf-m-inline | --pf-v6-c-button--PaddingBlockStart | 0 | ||
| ||||
| .pf-v6-c-button.pf-m-link.pf-m-inline | --pf-v6-c-button--PaddingInlineEnd | 0 | ||
| ||||
| .pf-v6-c-button.pf-m-link.pf-m-inline | --pf-v6-c-button--PaddingBlockEnd | 0 | ||
| ||||
| .pf-v6-c-button.pf-m-link.pf-m-inline | --pf-v6-c-button--PaddingInlineStart | 0 | ||
| ||||
| .pf-v6-c-button.pf-m-link.pf-m-inline | --pf-v6-c-button--BackgroundColor | transparent | ||
| .pf-v6-c-button.pf-m-link.pf-m-inline | --pf-v6-c-button__progress--InsetInlineStart | 0.25rem | ||
| ||||
| .pf-v6-c-button.pf-m-link.pf-m-inline | --pf-v6-c-button--TextDecorationLine | underline | ||
| ||||
| .pf-v6-c-button.pf-m-link.pf-m-inline | --pf-v6-c-button--TextDecorationStyle | solid | ||
| ||||
| .pf-v6-c-button.pf-m-link.pf-m-inline | --pf-v6-c-button--hover--TextDecorationLine | underline | ||
| ||||
| .pf-v6-c-button.pf-m-link.pf-m-inline | --pf-v6-c-button--hover--TextDecorationStyle | solid | ||
| ||||
| .pf-v6-c-button.pf-m-link.pf-m-inline | --pf-v6-c-button--hover--BackgroundColor | transparent | ||
| .pf-v6-c-button.pf-m-link.pf-m-inline | --pf-v6-c-button--m-clicked--BackgroundColor | transparent | ||
| .pf-v6-c-button.pf-m-link.pf-m-inline | --pf-v6-c-button--disabled--BackgroundColor | transparent | ||
| .pf-v6-c-button.pf-m-link.pf-m-inline | --pf-v6-c-button--disabled--Color | (In light theme) #a3a3a3 | ||
| ||||
| .pf-v6-c-button.pf-m-link.pf-m-inline | --pf-v6-c-button--disabled__icon--Color | (In light theme) #a3a3a3 | ||
| ||||
| span.pf-v6-c-button.pf-m-link.pf-m-inline | --pf-v6-c-button--m-link--m-inline--Display | inline | ||
| ||||
| span.pf-v6-c-button.pf-m-link.pf-m-inline | --pf-v6-c-button__icon--m-start--MarginInlineEnd | 0.5rem | ||
| ||||
| span.pf-v6-c-button.pf-m-link.pf-m-inline | --pf-v6-c-button__icon--m-end--MarginInlineStart | 0.5rem | ||
| ||||
| .pf-v6-c-button.pf-m-link.pf-m-danger | --pf-v6-c-button--m-danger--Color | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-button.pf-m-link.pf-m-danger | --pf-v6-c-button--m-danger--BackgroundColor | (In light theme) rgba(255, 255, 255, 0.0000) | ||
| ||||
| .pf-v6-c-button.pf-m-link.pf-m-danger | --pf-v6-c-button--m-danger__icon--Color | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-button.pf-m-link.pf-m-danger | --pf-v6-c-button--m-danger--hover--Color | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-button.pf-m-link.pf-m-danger | --pf-v6-c-button--m-danger--hover--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
| .pf-v6-c-button.pf-m-link.pf-m-danger | --pf-v6-c-button--m-danger--hover__icon--Color | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-button.pf-m-link.pf-m-danger | --pf-v6-c-button--m-danger--m-clicked--Color | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-button.pf-m-link.pf-m-danger | --pf-v6-c-button--m-danger--m-clicked--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
| .pf-v6-c-button.pf-m-link.pf-m-danger | --pf-v6-c-button--m-danger--m-clicked__icon--Color | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-button.pf-m-link.pf-m-display-lg | --pf-v6-c-button--FontSize | 1rem | ||
| ||||
| .pf-v6-c-button.pf-m-warning | --pf-v6-c-button--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-button.pf-m-warning | --pf-v6-c-button--BackgroundColor | (In light theme) #ffcc17 | ||
| ||||
| .pf-v6-c-button.pf-m-warning | --pf-v6-c-button__icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-button.pf-m-warning | --pf-v6-c-button--hover--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-button.pf-m-warning | --pf-v6-c-button--hover--BackgroundColor | (In light theme) #dca614 | ||
| ||||
| .pf-v6-c-button.pf-m-warning | --pf-v6-c-button--hover__icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-button.pf-m-warning | --pf-v6-c-button--m-clicked--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-button.pf-m-warning | --pf-v6-c-button--m-clicked--BackgroundColor | (In light theme) #dca614 | ||
| ||||
| .pf-v6-c-button.pf-m-warning | --pf-v6-c-button--m-clicked__icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-button.pf-m-danger | --pf-v6-c-button--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button.pf-m-danger | --pf-v6-c-button--BackgroundColor | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-button.pf-m-danger | --pf-v6-c-button__icon--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button.pf-m-danger | --pf-v6-c-button--hover--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button.pf-m-danger | --pf-v6-c-button--hover--BackgroundColor | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-button.pf-m-danger | --pf-v6-c-button--hover__icon--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button.pf-m-danger | --pf-v6-c-button--m-clicked--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button.pf-m-danger | --pf-v6-c-button--m-clicked--BackgroundColor | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-button.pf-m-danger | --pf-v6-c-button--m-clicked__icon--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button.pf-m-control | --pf-v6-c-button--BorderRadius | 6px | ||
| ||||
| .pf-v6-c-button.pf-m-control | --pf-v6-c-button--PaddingInlineStart | 1rem | ||
| ||||
| .pf-v6-c-button.pf-m-control | --pf-v6-c-button--PaddingInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-button.pf-m-control | --pf-v6-c-button--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-button.pf-m-control | --pf-v6-c-button--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button.pf-m-control | --pf-v6-c-button--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-button.pf-m-control | --pf-v6-c-button--BorderWidth | 1px | ||
| ||||
| .pf-v6-c-button.pf-m-control | --pf-v6-c-button__icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-button.pf-m-control | --pf-v6-c-button--hover--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-button.pf-m-control | --pf-v6-c-button--hover--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button.pf-m-control | --pf-v6-c-button--hover--BorderColor | (In light theme) #4394e5 | ||
| ||||
| .pf-v6-c-button.pf-m-control | --pf-v6-c-button--hover--BorderWidth | 1px | ||
| ||||
| .pf-v6-c-button.pf-m-control | --pf-v6-c-button--hover__icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-button.pf-m-control | --pf-v6-c-button--m-clicked--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-button.pf-m-control | --pf-v6-c-button--m-clicked--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button.pf-m-control | --pf-v6-c-button--m-clicked--BorderColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-button.pf-m-control | --pf-v6-c-button--m-clicked--BorderWidth | 2px | ||
| ||||
| .pf-v6-c-button.pf-m-control | --pf-v6-c-button--m-clicked__icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-button.pf-m-stateful | --pf-v6-c-button--BorderRadius | 6px | ||
| ||||
| .pf-v6-c-button.pf-m-stateful | --pf-v6-c-button--PaddingInlineStart | 1rem | ||
| ||||
| .pf-v6-c-button.pf-m-stateful | --pf-v6-c-button--PaddingInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-button.pf-m-read | --pf-v6-c-button--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button.pf-m-read | --pf-v6-c-button--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-button.pf-m-read | --pf-v6-c-button--hover--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button.pf-m-read | --pf-v6-c-button--hover--BorderColor | (In light theme) #4394e5 | ||
| ||||
| .pf-v6-c-button.pf-m-read | --pf-v6-c-button--m-clicked--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button.pf-m-read | --pf-v6-c-button--m-clicked--BorderColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-button.pf-m-unread | --pf-v6-c-button--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button.pf-m-unread | --pf-v6-c-button--BackgroundColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-button.pf-m-unread | --pf-v6-c-button__icon--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button.pf-m-unread | --pf-v6-c-button--hover--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button.pf-m-unread | --pf-v6-c-button--hover--BackgroundColor | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button.pf-m-unread | --pf-v6-c-button--hover__icon--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button.pf-m-unread | --pf-v6-c-button--m-clicked--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button.pf-m-unread | --pf-v6-c-button--m-clicked--BackgroundColor | (In light theme) #004d99 | ||
| ||||
| .pf-v6-c-button.pf-m-unread | --pf-v6-c-button--m-clicked__icon--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button.pf-m-attention | --pf-v6-c-button--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button.pf-m-attention | --pf-v6-c-button--BackgroundColor | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-button.pf-m-attention | --pf-v6-c-button__icon--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button.pf-m-attention | --pf-v6-c-button--hover--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button.pf-m-attention | --pf-v6-c-button--hover--BackgroundColor | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-button.pf-m-attention | --pf-v6-c-button--hover__icon--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button.pf-m-attention | --pf-v6-c-button--m-clicked--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button.pf-m-attention | --pf-v6-c-button--m-clicked--BackgroundColor | (In light theme) #731f00 | ||
| ||||
| .pf-v6-c-button.pf-m-attention | --pf-v6-c-button--m-clicked__icon--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button.pf-m-plain | --pf-v6-c-button--BorderRadius | 6px | ||
| ||||
| .pf-v6-c-button.pf-m-plain | --pf-v6-c-button--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-button.pf-m-plain | --pf-v6-c-button__icon--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-button.pf-m-plain | --pf-v6-c-button--BackgroundColor | (In light theme) rgba(255, 255, 255, 0.0000) | ||
| ||||
| .pf-v6-c-button.pf-m-plain | --pf-v6-c-button--PaddingInlineEnd | 0.5rem | ||
| ||||
| .pf-v6-c-button.pf-m-plain | --pf-v6-c-button--PaddingInlineStart | 0.5rem | ||
| ||||
| .pf-v6-c-button.pf-m-plain | --pf-v6-c-button__progress--Color | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-button.pf-m-plain | --pf-v6-c-button--hover--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-button.pf-m-plain | --pf-v6-c-button--hover--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
| .pf-v6-c-button.pf-m-plain | --pf-v6-c-button--m-clicked--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-button.pf-m-plain | --pf-v6-c-button--m-clicked--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
| .pf-v6-c-button.pf-m-plain | --pf-v6-c-button--disabled--Color | (In light theme) #a3a3a3 | ||
| ||||
| .pf-v6-c-button.pf-m-plain | --pf-v6-c-button--disabled__icon--Color | (In light theme) #a3a3a3 | ||
| ||||
| .pf-v6-c-button.pf-m-plain | --pf-v6-c-button--disabled--BackgroundColor | transparent | ||
| ||||
| .pf-v6-c-button.pf-m-plain | --pf-v6-c-button--m-small--PaddingInlineEnd | 0.25rem | ||
| ||||
| .pf-v6-c-button.pf-m-plain | --pf-v6-c-button--m-small--PaddingInlineStart | 0.25rem | ||
| ||||
| .pf-v6-c-button.pf-m-plain.pf-m-no-padding | --pf-v6-c-button__icon--Color | (In light theme) #707070 | ||
| ||||
| .pf-v6-c-button.pf-m-plain.pf-m-no-padding | --pf-v6-c-button--BackgroundColor | transparent | ||
| ||||
| .pf-v6-c-button.pf-m-plain.pf-m-no-padding | --pf-v6-c-button--hover--BackgroundColor | transparent | ||
| ||||
| .pf-v6-c-button.pf-m-plain.pf-m-no-padding | --pf-v6-c-button--m-clicked--BackgroundColor | transparent | ||
| ||||
| .pf-v6-c-button.pf-m-plain.pf-m-no-padding | --pf-v6-c-button--PaddingBlockStart | 0 | ||
| ||||
| .pf-v6-c-button.pf-m-plain.pf-m-no-padding | --pf-v6-c-button--PaddingBlockEnd | 0 | ||
| ||||
| .pf-v6-c-button.pf-m-plain.pf-m-no-padding | --pf-v6-c-button--m-plain--PaddingInlineEnd | 0 | ||
| ||||
| .pf-v6-c-button.pf-m-plain.pf-m-no-padding | --pf-v6-c-button--m-plain--PaddingInlineStart | 0 | ||
| ||||
| .pf-v6-c-button.pf-m-block | --pf-v6-c-button--Display | flex | ||
| ||||
| .pf-v6-c-button.pf-m-small | --pf-v6-c-button--PaddingBlockStart | 0.25rem | ||
| ||||
| .pf-v6-c-button.pf-m-small | --pf-v6-c-button--PaddingInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-button.pf-m-small | --pf-v6-c-button--PaddingBlockEnd | 0.25rem | ||
| ||||
| .pf-v6-c-button.pf-m-small | --pf-v6-c-button--PaddingInlineStart | 1rem | ||
| ||||
| .pf-v6-c-button.pf-m-display-lg | --pf-v6-c-button--PaddingBlockStart | 1rem | ||
| ||||
| .pf-v6-c-button.pf-m-display-lg | --pf-v6-c-button--PaddingInlineEnd | 2rem | ||
| ||||
| .pf-v6-c-button.pf-m-display-lg | --pf-v6-c-button--PaddingBlockEnd | 1rem | ||
| ||||
| .pf-v6-c-button.pf-m-display-lg | --pf-v6-c-button--PaddingInlineStart | 2rem | ||
| ||||
| .pf-v6-c-button.pf-m-display-lg | --pf-v6-c-button--FontSize | undefined | ||
| ||||
| .pf-v6-c-button:hover | --pf-v6-c-button--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button:hover | --pf-v6-c-button--BackgroundColor | transparent | ||
| ||||
| .pf-v6-c-button:hover | --pf-v6-c-button--BorderColor | transparent | ||
| ||||
| .pf-v6-c-button:hover | --pf-v6-c-button--BorderWidth | 2px | ||
| ||||
| .pf-v6-c-button:hover | --pf-v6-c-button--m-plain--m-no-padding__icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-button:hover | --pf-v6-c-button__icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-button.pf-m-clicked | --pf-v6-c-button--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-button.pf-m-clicked | --pf-v6-c-button--BackgroundColor | transparent | ||
| ||||
| .pf-v6-c-button.pf-m-clicked | --pf-v6-c-button--BorderWidth | 2px | ||
| ||||
| .pf-v6-c-button.pf-m-clicked | --pf-v6-c-button--BorderColor | transparent | ||
| ||||
| .pf-v6-c-button.pf-m-clicked | --pf-v6-c-button__icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-button.pf-m-aria-disabled | --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine | none | ||
| ||||
| .pf-v6-c-button.pf-m-aria-disabled | --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle | none | ||
| ||||
| .pf-v6-c-button.pf-m-progress | --pf-v6-c-button--PaddingInlineEnd | calc(1rem + calc(1rem + 0.5rem) / 2) | ||
| ||||
| .pf-v6-c-button.pf-m-progress | --pf-v6-c-button--PaddingInlineStart | calc(1rem + calc(1rem + 0.5rem) / 2) | ||
| ||||
| .pf-v6-c-button.pf-m-in-progress | --pf-v6-c-button--m-link--m-inline--PaddingInlineStart | calc(0.25rem + 1rem + 0.5rem) | ||
| ||||
| .pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain) | --pf-v6-c-button--PaddingInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain) | --pf-v6-c-button--PaddingInlineStart | calc(1rem + calc(1rem + 0.5rem)) | ||
| ||||
| .pf-v6-c-button.pf-m-in-progress.pf-m-plain | --pf-v6-c-button__progress--InsetInlineStart | 50% | ||
| ||||
| .pf-v6-c-button.pf-m-in-progress.pf-m-plain | --pf-v6-c-button__progress--TranslateX | -50% | ||
| ||||
| .pf-v6-c-button__icon.pf-m-start | --pf-v6-c-button__icon--MarginInlineEnd | 0 | ||
| ||||
| .pf-v6-c-button__icon.pf-m-end | --pf-v6-c-button__icon--MarginInlineStart | 0 | ||
| ||||
| .pf-v6-c-button__progress .pf-v6-c-spinner | --pf-v6-c-spinner--Color | currentcolor | ||