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-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-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-c-button, span.pf-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-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-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-c-button.pf-m-disabled, span.pf-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-c-button.pf-m-expanded | Indicates that the expanded content element is visible. Required |
tabindex="-1" | a.pf-c-button.pf-m-disabled, span.pf-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-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-c-button | <button> | Initiates a button. Always use it with a modifier class. Required |
.pf-c-button__icon | <span> | Initiates a button icon. |
.pf-c-button__progress | <span> | Initiates a button progress container. |
.pf-c-button__count | <span> | Initiates a button count container. Note: Count should only be used on link buttons. |
.pf-m-primary | .pf-c-button | Modifies for primary styles. |
.pf-m-secondary | .pf-c-button | Modifies for secondary styles. |
.pf-m-tertiary | .pf-c-button | Modifies for tertiary styles. |
.pf-m-danger | .pf-c-button | Modifies for danger styles. |
.pf-m-link | .pf-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-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-inline | .pf-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-c-button | Creates a block level button. |
.pf-m-control | .pf-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-c-button.pf-m-control | Modifies a control button for the expanded state. |
.pf-m-start | .pf-c-button__icon | Applies right spacing to an icon inside of a button when the icon comes before text. |
.pf-m-end | .pf-c-button__icon | Applies left spacing to an icon inside of a button when the icon comes after text. |
.pf-m-active | .pf-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-c-button | Modifies the button so that it has small font size. |
.pf-m-aria-disabled | .pf-c-button | Modifies a button to be visually disabled, yet is still focusable. |
.pf-m-display-lg | .pf-c-button, pf-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-c-button | Indicates that the button supports the progress state. Note: Not used with the plain variation. |
.pf-m-in-progress | .pf-c-button | Indicates that the button is in the in progress state. |
CSS variables
| .pf-c-button | --pf-c-button--PaddingTop | 0.375rem | ||
| .pf-c-button | --pf-c-button--PaddingRight | 1rem | ||
| .pf-c-button | --pf-c-button--PaddingBottom | 0.375rem | ||
| .pf-c-button | --pf-c-button--PaddingLeft | 1rem | ||
| .pf-c-button | --pf-c-button--LineHeight | 1.5 | ||
| .pf-c-button | --pf-c-button--FontWeight | 400 | ||
| .pf-c-button | --pf-c-button--FontSize | 1rem | ||
| .pf-c-button | --pf-c-button--BackgroundColor | transparent | ||
| .pf-c-button | --pf-c-button--BorderRadius | 3px | ||
| .pf-c-button | --pf-c-button--after--BorderRadius | 3px | ||
| .pf-c-button | --pf-c-button--after--BorderColor | transparent | ||
| .pf-c-button | --pf-c-button--after--BorderWidth | 1px | ||
| .pf-c-button | --pf-c-button--hover--after--BorderWidth | 2px | ||
| .pf-c-button | --pf-c-button--focus--after--BorderWidth | 2px | ||
| .pf-c-button | --pf-c-button--active--after--BorderWidth | 2px | ||
| .pf-c-button | --pf-c-button--disabled--Color | #6a6e73 | ||
| .pf-c-button | --pf-c-button--disabled--BackgroundColor | #d2d2d2 | ||
| .pf-c-button | --pf-c-button--disabled--after--BorderColor | transparent | ||
| .pf-c-button | --pf-c-button--m-primary--BackgroundColor | #06c | ||
| .pf-c-button | --pf-c-button--m-primary--Color | #fff | ||
| .pf-c-button | --pf-c-button--m-primary--hover--BackgroundColor | #004080 | ||
| .pf-c-button | --pf-c-button--m-primary--hover--Color | #fff | ||
| .pf-c-button | --pf-c-button--m-primary--focus--BackgroundColor | #004080 | ||
| .pf-c-button | --pf-c-button--m-primary--focus--Color | #fff | ||
| .pf-c-button | --pf-c-button--m-primary--active--BackgroundColor | #004080 | ||
| .pf-c-button | --pf-c-button--m-primary--active--Color | #fff | ||
| .pf-c-button | --pf-c-button--m-secondary--BackgroundColor | transparent | ||
| .pf-c-button | --pf-c-button--m-secondary--after--BorderColor | #06c | ||
| .pf-c-button | --pf-c-button--m-secondary--Color | #06c | ||
| .pf-c-button | --pf-c-button--m-secondary--hover--BackgroundColor | transparent | ||
| .pf-c-button | --pf-c-button--m-secondary--hover--after--BorderColor | #06c | ||
| .pf-c-button | --pf-c-button--m-secondary--hover--Color | #06c | ||
| .pf-c-button | --pf-c-button--m-secondary--focus--BackgroundColor | transparent | ||
| .pf-c-button | --pf-c-button--m-secondary--focus--after--BorderColor | #06c | ||
| .pf-c-button | --pf-c-button--m-secondary--focus--Color | #06c | ||
| .pf-c-button | --pf-c-button--m-secondary--active--BackgroundColor | transparent | ||
| .pf-c-button | --pf-c-button--m-secondary--active--after--BorderColor | #06c | ||
| .pf-c-button | --pf-c-button--m-secondary--active--Color | #06c | ||
| .pf-c-button | --pf-c-button--m-secondary--m-danger--BackgroundColor | transparent | ||
| .pf-c-button | --pf-c-button--m-secondary--m-danger--Color | #c9190b | ||
| .pf-c-button | --pf-c-button--m-secondary--m-danger--after--BorderColor | #c9190b | ||
| .pf-c-button | --pf-c-button--m-secondary--m-danger--hover--BackgroundColor | transparent | ||
| .pf-c-button | --pf-c-button--m-secondary--m-danger--hover--Color | #a30000 | ||
| .pf-c-button | --pf-c-button--m-secondary--m-danger--hover--after--BorderColor | #c9190b | ||
| .pf-c-button | --pf-c-button--m-secondary--m-danger--focus--BackgroundColor | transparent | ||
| .pf-c-button | --pf-c-button--m-secondary--m-danger--focus--Color | #a30000 | ||
| .pf-c-button | --pf-c-button--m-secondary--m-danger--focus--after--BorderColor | #c9190b | ||
| .pf-c-button | --pf-c-button--m-secondary--m-danger--active--BackgroundColor | transparent | ||
| .pf-c-button | --pf-c-button--m-secondary--m-danger--active--Color | #a30000 | ||
| .pf-c-button | --pf-c-button--m-secondary--m-danger--active--after--BorderColor | #c9190b | ||
| .pf-c-button | --pf-c-button--m-tertiary--BackgroundColor | transparent | ||
| .pf-c-button | --pf-c-button--m-tertiary--after--BorderColor | #151515 | ||
| .pf-c-button | --pf-c-button--m-tertiary--Color | #151515 | ||
| .pf-c-button | --pf-c-button--m-tertiary--hover--BackgroundColor | transparent | ||
| .pf-c-button | --pf-c-button--m-tertiary--hover--after--BorderColor | #151515 | ||
| .pf-c-button | --pf-c-button--m-tertiary--hover--Color | #151515 | ||
| .pf-c-button | --pf-c-button--m-tertiary--focus--BackgroundColor | transparent | ||
| .pf-c-button | --pf-c-button--m-tertiary--focus--after--BorderColor | #151515 | ||
| .pf-c-button | --pf-c-button--m-tertiary--focus--Color | #151515 | ||
| .pf-c-button | --pf-c-button--m-tertiary--active--BackgroundColor | transparent | ||
| .pf-c-button | --pf-c-button--m-tertiary--active--after--BorderColor | #151515 | ||
| .pf-c-button | --pf-c-button--m-tertiary--active--Color | #151515 | ||
| .pf-c-button | --pf-c-button--m-warning--BackgroundColor | #f0ab00 | ||
| .pf-c-button | --pf-c-button--m-warning--Color | #151515 | ||
| .pf-c-button | --pf-c-button--m-warning--hover--BackgroundColor | #c58c00 | ||
| .pf-c-button | --pf-c-button--m-warning--hover--Color | #151515 | ||
| .pf-c-button | --pf-c-button--m-warning--focus--BackgroundColor | #c58c00 | ||
| .pf-c-button | --pf-c-button--m-warning--focus--Color | #151515 | ||
| .pf-c-button | --pf-c-button--m-warning--active--BackgroundColor | #c58c00 | ||
| .pf-c-button | --pf-c-button--m-warning--active--Color | #151515 | ||
| .pf-c-button | --pf-c-button--m-danger--BackgroundColor | #c9190b | ||
| .pf-c-button | --pf-c-button--m-danger--Color | #fff | ||
| .pf-c-button | --pf-c-button--m-danger--hover--BackgroundColor | #a30000 | ||
| .pf-c-button | --pf-c-button--m-danger--hover--Color | #fff | ||
| .pf-c-button | --pf-c-button--m-danger--focus--BackgroundColor | #a30000 | ||
| .pf-c-button | --pf-c-button--m-danger--focus--Color | #fff | ||
| .pf-c-button | --pf-c-button--m-danger--active--BackgroundColor | #a30000 | ||
| .pf-c-button | --pf-c-button--m-danger--active--Color | #fff | ||
| .pf-c-button | --pf-c-button--m-link--BackgroundColor | transparent | ||
| .pf-c-button | --pf-c-button--m-link--Color | #06c | ||
| .pf-c-button | --pf-c-button--m-link--hover--BackgroundColor | transparent | ||
| .pf-c-button | --pf-c-button--m-link--hover--Color | #004080 | ||
| .pf-c-button | --pf-c-button--m-link--focus--BackgroundColor | transparent | ||
| .pf-c-button | --pf-c-button--m-link--focus--Color | #004080 | ||
| .pf-c-button | --pf-c-button--m-link--active--BackgroundColor | transparent | ||
| .pf-c-button | --pf-c-button--m-link--active--Color | #004080 | ||
| .pf-c-button | --pf-c-button--m-link--disabled--BackgroundColor | transparent | ||
| .pf-c-button | --pf-c-button--m-link--m-inline--FontSize | inherit | ||
| .pf-c-button | --pf-c-button--m-link--m-inline--hover--TextDecoration | underline | ||
| .pf-c-button | --pf-c-button--m-link--m-inline--hover--Color | #004080 | ||
| .pf-c-button | --pf-c-button--m-link--m-inline--PaddingTop | 0 | ||
| .pf-c-button | --pf-c-button--m-link--m-inline--PaddingRight | 0 | ||
| .pf-c-button | --pf-c-button--m-link--m-inline--PaddingBottom | 0 | ||
| .pf-c-button | --pf-c-button--m-link--m-inline--PaddingLeft | 0 | ||
| .pf-c-button | --pf-c-button--m-link--m-inline__progress--Left | 0.25rem | ||
| .pf-c-button | --pf-c-button--m-link--m-inline--m-in-progress--PaddingLeft | calc(0.25rem + 1rem + 0.5rem) | ||
| .pf-c-button | --pf-c-button--m-link--m-danger--BackgroundColor | transparent | ||
| .pf-c-button | --pf-c-button--m-link--m-danger--Color | #c9190b | ||
| .pf-c-button | --pf-c-button--m-link--m-danger--hover--BackgroundColor | transparent | ||
| .pf-c-button | --pf-c-button--m-link--m-danger--hover--Color | #a30000 | ||
| .pf-c-button | --pf-c-button--m-link--m-danger--focus--BackgroundColor | transparent | ||
| .pf-c-button | --pf-c-button--m-link--m-danger--focus--Color | #a30000 | ||
| .pf-c-button | --pf-c-button--m-link--m-danger--active--BackgroundColor | transparent | ||
| .pf-c-button | --pf-c-button--m-link--m-danger--active--Color | #a30000 | ||
| .pf-c-button | --pf-c-button--m-plain--BackgroundColor | transparent | ||
| .pf-c-button | --pf-c-button--m-plain--Color | #6a6e73 | ||
| .pf-c-button | --pf-c-button--m-plain--hover--BackgroundColor | transparent | ||
| .pf-c-button | --pf-c-button--m-plain--hover--Color | #151515 | ||
| .pf-c-button | --pf-c-button--m-plain--focus--BackgroundColor | transparent | ||
| .pf-c-button | --pf-c-button--m-plain--focus--Color | #151515 | ||
| .pf-c-button | --pf-c-button--m-plain--active--BackgroundColor | transparent | ||
| .pf-c-button | --pf-c-button--m-plain--active--Color | #151515 | ||
| .pf-c-button | --pf-c-button--m-plain--disabled--Color | #d2d2d2 | ||
| .pf-c-button | --pf-c-button--m-plain--disabled--BackgroundColor | transparent | ||
| .pf-c-button | --pf-c-button--m-control--BackgroundColor | #fff | ||
| .pf-c-button | --pf-c-button--m-control--Color | #151515 | ||
| .pf-c-button | --pf-c-button--m-control--BorderRadius | 0 | ||
| .pf-c-button | --pf-c-button--m-control--after--BorderWidth | 1px | ||
| .pf-c-button | --pf-c-button--m-control--after--BorderTopColor | #f0f0f0 | ||
| .pf-c-button | --pf-c-button--m-control--after--BorderRightColor | #f0f0f0 | ||
| .pf-c-button | --pf-c-button--m-control--after--BorderBottomColor | #8a8d90 | ||
| .pf-c-button | --pf-c-button--m-control--after--BorderLeftColor | #f0f0f0 | ||
| .pf-c-button | --pf-c-button--m-control--disabled--BackgroundColor | #f0f0f0 | ||
| .pf-c-button | --pf-c-button--m-control--hover--BackgroundColor | #fff | ||
| .pf-c-button | --pf-c-button--m-control--hover--Color | #151515 | ||
| .pf-c-button | --pf-c-button--m-control--hover--after--BorderBottomWidth | 2px | ||
| .pf-c-button | --pf-c-button--m-control--hover--after--BorderBottomColor | #06c | ||
| .pf-c-button | --pf-c-button--m-control--active--BackgroundColor | #fff | ||
| .pf-c-button | --pf-c-button--m-control--active--Color | #151515 | ||
| .pf-c-button | --pf-c-button--m-control--active--after--BorderBottomWidth | 2px | ||
| .pf-c-button | --pf-c-button--m-control--active--after--BorderBottomColor | #06c | ||
| .pf-c-button | --pf-c-button--m-control--focus--BackgroundColor | #fff | ||
| .pf-c-button | --pf-c-button--m-control--focus--Color | #151515 | ||
| .pf-c-button | --pf-c-button--m-control--focus--after--BorderBottomWidth | 2px | ||
| .pf-c-button | --pf-c-button--m-control--focus--after--BorderBottomColor | #06c | ||
| .pf-c-button | --pf-c-button--m-control--m-expanded--BackgroundColor | #fff | ||
| .pf-c-button | --pf-c-button--m-control--m-expanded--Color | #151515 | ||
| .pf-c-button | --pf-c-button--m-control--m-expanded--after--BorderBottomWidth | 2px | ||
| .pf-c-button | --pf-c-button--m-control--m-expanded--after--BorderBottomColor | #06c | ||
| .pf-c-button | --pf-c-button--m-small--FontSize | 0.875rem | ||
| .pf-c-button | --pf-c-button--m-display-lg--PaddingTop | 1rem | ||
| .pf-c-button | --pf-c-button--m-display-lg--PaddingRight | 2rem | ||
| .pf-c-button | --pf-c-button--m-display-lg--PaddingBottom | 1rem | ||
| .pf-c-button | --pf-c-button--m-display-lg--PaddingLeft | 2rem | ||
| .pf-c-button | --pf-c-button--m-display-lg--FontWeight | 700 | ||
| .pf-c-button | --pf-c-button--m-link--m-display-lg--FontSize | 1.125rem | ||
| .pf-c-button | --pf-c-button__icon--m-start--MarginRight | 0.25rem | ||
| .pf-c-button | --pf-c-button__icon--m-end--MarginLeft | 0.25rem | ||
| .pf-c-button | --pf-c-button__progress--width | calc(1.125rem + 0.5rem) | ||
| .pf-c-button | --pf-c-button__progress--Opacity | 0 | ||
| .pf-c-button | --pf-c-button__progress--TranslateY | -50% | ||
| .pf-c-button | --pf-c-button__progress--TranslateX | 0 | ||
| .pf-c-button | --pf-c-button__progress--Top | 50% | ||
| .pf-c-button | --pf-c-button__progress--Left | 1rem | ||
| .pf-c-button | --pf-c-button--m-progress--TransitionProperty | padding | ||
| .pf-c-button | --pf-c-button--m-progress--TransitionDuration | 250ms | ||
| .pf-c-button | --pf-c-button--m-progress--PaddingRight | calc(1rem + calc(1.125rem + 0.5rem) / 2) | ||
| .pf-c-button | --pf-c-button--m-progress--PaddingLeft | calc(1rem + calc(1.125rem + 0.5rem) / 2) | ||
| .pf-c-button | --pf-c-button--m-in-progress--PaddingRight | 1rem | ||
| .pf-c-button | --pf-c-button--m-in-progress--PaddingLeft | calc(1rem + calc(1.125rem + 0.5rem)) | ||
| .pf-c-button | --pf-c-button--m-in-progress--m-plain--Color | #06c | ||
| .pf-c-button | --pf-c-button--m-in-progress--m-plain__progress--Left | 50% | ||
| .pf-c-button | --pf-c-button--m-in-progress--m-plain__progress--TranslateX | -50% | ||
| .pf-c-button | --pf-c-button__count--MarginLeft | 0.5rem | ||
| .pf-c-button | --pf-c-button--disabled__c-badge--Color | #151515 | ||
| .pf-c-button | --pf-c-button--disabled__c-badge--BackgroundColor | #f0f0f0 | ||
| .pf-c-button | --pf-c-button--m-primary__c-badge--BorderColor | #f0f0f0 | ||
| .pf-c-button | --pf-c-button--m-primary__c-badge--BorderWidth | 1px | ||
| .pf-c-button:hover | --pf-c-button--after--BorderWidth | 2px | ||
| .pf-c-button:focus | --pf-c-button--after--BorderWidth | 2px | ||
| .pf-c-button:active | --pf-c-button--after--BorderWidth | 2px | ||
| .pf-c-button.pf-m-small | --pf-c-button--FontSize | 0.875rem | ||
| .pf-c-button.pf-m-primary.pf-m-display-lg | --pf-c-button--PaddingTop | 1rem | ||
| .pf-c-button.pf-m-primary.pf-m-display-lg | --pf-c-button--PaddingRight | 2rem | ||
| .pf-c-button.pf-m-primary.pf-m-display-lg | --pf-c-button--PaddingBottom | 1rem | ||
| .pf-c-button.pf-m-primary.pf-m-display-lg | --pf-c-button--PaddingLeft | 2rem | ||
| .pf-c-button.pf-m-primary.pf-m-display-lg | --pf-c-button--FontWeight | 700 | ||
| .pf-c-button.pf-m-primary:hover | --pf-c-button--m-primary--Color | #fff | ||
| .pf-c-button.pf-m-primary:hover | --pf-c-button--m-primary--BackgroundColor | #004080 | ||
| .pf-c-button.pf-m-primary:focus | --pf-c-button--m-primary--Color | #fff | ||
| .pf-c-button.pf-m-primary:focus | --pf-c-button--m-primary--BackgroundColor | #004080 | ||
| .pf-c-button.pf-m-primary:active | --pf-c-button--m-primary--Color | #fff | ||
| .pf-c-button.pf-m-primary:active | --pf-c-button--m-primary--BackgroundColor | #004080 | ||
| .pf-c-button.pf-m-secondary | --pf-c-button--after--BorderColor | #06c | ||
| .pf-c-button.pf-m-secondary:hover | --pf-c-button--m-secondary--Color | #06c | ||
| .pf-c-button.pf-m-secondary:hover | --pf-c-button--m-secondary--BackgroundColor | transparent | ||
| .pf-c-button.pf-m-secondary:hover | --pf-c-button--after--BorderColor | #06c | ||
| .pf-c-button.pf-m-secondary:focus | --pf-c-button--m-secondary--Color | #06c | ||
| .pf-c-button.pf-m-secondary:focus | --pf-c-button--m-secondary--BackgroundColor | transparent | ||
| .pf-c-button.pf-m-secondary:focus | --pf-c-button--after--BorderColor | #06c | ||
| .pf-c-button.pf-m-secondary.pf-m-active | --pf-c-button--m-secondary--Color | #06c | ||
| .pf-c-button.pf-m-secondary.pf-m-active | --pf-c-button--m-secondary--BackgroundColor | transparent | ||
| .pf-c-button.pf-m-secondary.pf-m-active | --pf-c-button--after--BorderColor | #06c | ||
| .pf-c-button.pf-m-tertiary | --pf-c-button--after--BorderColor | #151515 | ||
| .pf-c-button.pf-m-tertiary:hover | --pf-c-button--m-tertiary--Color | #151515 | ||
| .pf-c-button.pf-m-tertiary:hover | --pf-c-button--m-tertiary--BackgroundColor | transparent | ||
| .pf-c-button.pf-m-tertiary:hover | --pf-c-button--after--BorderColor | #151515 | ||
| .pf-c-button.pf-m-tertiary:focus | --pf-c-button--m-tertiary--Color | #151515 | ||
| .pf-c-button.pf-m-tertiary:focus | --pf-c-button--m-tertiary--BackgroundColor | transparent | ||
| .pf-c-button.pf-m-tertiary:focus | --pf-c-button--after--BorderColor | #151515 | ||
| .pf-c-button.pf-m-tertiary:active | --pf-c-button--m-tertiary--Color | #151515 | ||
| .pf-c-button.pf-m-tertiary:active | --pf-c-button--m-tertiary--BackgroundColor | transparent | ||
| .pf-c-button.pf-m-tertiary:active | --pf-c-button--after--BorderColor | #151515 | ||
| .pf-c-button.pf-m-link | --pf-c-button--disabled--BackgroundColor | transparent | ||
| .pf-c-button.pf-m-link:not(.pf-m-inline):hover | --pf-c-button--m-link--Color | #004080 | ||
| .pf-c-button.pf-m-link:not(.pf-m-inline):hover | --pf-c-button--m-link--BackgroundColor | transparent | ||
| .pf-c-button.pf-m-link:not(.pf-m-inline):focus | --pf-c-button--m-link--Color | #004080 | ||
| .pf-c-button.pf-m-link:not(.pf-m-inline):focus | --pf-c-button--m-link--BackgroundColor | transparent | ||
| .pf-c-button.pf-m-link:not(.pf-m-inline):active | --pf-c-button--m-link--Color | #004080 | ||
| .pf-c-button.pf-m-link:not(.pf-m-inline):active | --pf-c-button--m-link--BackgroundColor | transparent | ||
| .pf-c-button.pf-m-link.pf-m-inline | --pf-c-button--FontSize | inherit | ||
| .pf-c-button.pf-m-link.pf-m-inline | --pf-c-button__progress--Left | 0.25rem | ||
| .pf-c-button.pf-m-link.pf-m-inline:hover | --pf-c-button--m-link--Color | #004080 | ||
| .pf-c-button.pf-m-link.pf-m-display-lg | --pf-c-button--FontSize | 1.125rem | ||
| .pf-c-button.pf-m-danger:hover | --pf-c-button--m-danger--Color | #fff | ||
| .pf-c-button.pf-m-danger:hover | --pf-c-button--m-danger--BackgroundColor | #a30000 | ||
| .pf-c-button.pf-m-danger:focus | --pf-c-button--m-danger--Color | #fff | ||
| .pf-c-button.pf-m-danger:focus | --pf-c-button--m-danger--BackgroundColor | #a30000 | ||
| .pf-c-button.pf-m-danger:active | --pf-c-button--m-danger--Color | #fff | ||
| .pf-c-button.pf-m-danger:active | --pf-c-button--m-danger--BackgroundColor | #a30000 | ||
| .pf-c-button.pf-m-danger.pf-m-secondary | --pf-c-button--m-danger--Color | #c9190b | ||
| .pf-c-button.pf-m-danger.pf-m-secondary | --pf-c-button--m-danger--BackgroundColor | transparent | ||
| .pf-c-button.pf-m-danger.pf-m-secondary | --pf-c-button--after--BorderColor | #c9190b | ||
| .pf-c-button.pf-m-danger.pf-m-secondary:hover | --pf-c-button--m-secondary--m-danger--Color | #a30000 | ||
| .pf-c-button.pf-m-danger.pf-m-secondary:hover | --pf-c-button--m-secondary--m-danger--BackgroundColor | transparent | ||
| .pf-c-button.pf-m-danger.pf-m-secondary:hover | --pf-c-button--after--BorderColor | #c9190b | ||
| .pf-c-button.pf-m-danger.pf-m-secondary:focus | --pf-c-button--m-secondary--m-danger--Color | #a30000 | ||
| .pf-c-button.pf-m-danger.pf-m-secondary:focus | --pf-c-button--m-secondary--m-danger--BackgroundColor | transparent | ||
| .pf-c-button.pf-m-danger.pf-m-secondary:focus | --pf-c-button--after--BorderColor | #c9190b | ||
| .pf-c-button.pf-m-danger.pf-m-secondary:active | --pf-c-button--m-secondary--m-danger--Color | #a30000 | ||
| .pf-c-button.pf-m-danger.pf-m-secondary:active | --pf-c-button--m-secondary--m-danger--BackgroundColor | transparent | ||
| .pf-c-button.pf-m-danger.pf-m-secondary:active | --pf-c-button--after--BorderColor | #c9190b | ||
| .pf-c-button.pf-m-danger.pf-m-link | --pf-c-button--m-danger--Color | #c9190b | ||
| .pf-c-button.pf-m-danger.pf-m-link | --pf-c-button--m-danger--BackgroundColor | transparent | ||
| .pf-c-button.pf-m-danger.pf-m-link:hover | --pf-c-button--m-link--m-danger--Color | #a30000 | ||
| .pf-c-button.pf-m-danger.pf-m-link:hover | --pf-c-button--m-link--m-danger--BackgroundColor | transparent | ||
| .pf-c-button.pf-m-danger.pf-m-link:focus | --pf-c-button--m-link--m-danger--Color | #a30000 | ||
| .pf-c-button.pf-m-danger.pf-m-link:focus | --pf-c-button--m-link--m-danger--BackgroundColor | transparent | ||
| .pf-c-button.pf-m-danger.pf-m-link:active | --pf-c-button--m-link--m-danger--Color | #a30000 | ||
| .pf-c-button.pf-m-danger.pf-m-link:active | --pf-c-button--m-link--m-danger--BackgroundColor | transparent | ||
| .pf-c-button.pf-m-warning:hover | --pf-c-button--m-warning--Color | #151515 | ||
| .pf-c-button.pf-m-warning:hover | --pf-c-button--m-warning--BackgroundColor | #c58c00 | ||
| .pf-c-button.pf-m-warning:focus | --pf-c-button--m-warning--Color | #151515 | ||
| .pf-c-button.pf-m-warning:focus | --pf-c-button--m-warning--BackgroundColor | #c58c00 | ||
| .pf-c-button.pf-m-warning:active | --pf-c-button--m-warning--Color | #151515 | ||
| .pf-c-button.pf-m-warning:active | --pf-c-button--m-warning--BackgroundColor | #c58c00 | ||
| .pf-c-button.pf-m-control | --pf-c-button--BorderRadius | 0 | ||
| .pf-c-button.pf-m-control | --pf-c-button--disabled--BackgroundColor | #f0f0f0 | ||
| .pf-c-button.pf-m-control | --pf-c-button--after--BorderWidth | 1px | ||
| .pf-c-button.pf-m-control | --pf-c-button--after--BorderColor | #f0f0f0 #f0f0f0 #8a8d90 #f0f0f0 | ||
| .pf-c-button.pf-m-control:hover | --pf-c-button--m-control--Color | #151515 | ||
| .pf-c-button.pf-m-control:hover | --pf-c-button--m-control--BackgroundColor | #fff | ||
| .pf-c-button.pf-m-control:hover | --pf-c-button--m-control--after--BorderBottomColor | #06c | ||
| .pf-c-button.pf-m-control:active | --pf-c-button--m-control--Color | #151515 | ||
| .pf-c-button.pf-m-control:active | --pf-c-button--m-control--BackgroundColor | #fff | ||
| .pf-c-button.pf-m-control:active | --pf-c-button--m-control--after--BorderBottomColor | #06c | ||
| .pf-c-button.pf-m-control:focus | --pf-c-button--m-control--Color | #151515 | ||
| .pf-c-button.pf-m-control:focus | --pf-c-button--m-control--BackgroundColor | #fff | ||
| .pf-c-button.pf-m-control:focus | --pf-c-button--m-control--after--BorderBottomColor | #06c | ||
| .pf-c-button.pf-m-control.pf-m-expanded | --pf-c-button--m-control--Color | #151515 | ||
| .pf-c-button.pf-m-control.pf-m-expanded | --pf-c-button--m-control--BackgroundColor | #fff | ||
| .pf-c-button.pf-m-control.pf-m-expanded | --pf-c-button--m-control--after--BorderBottomColor | #06c | ||
| .pf-c-button.pf-m-plain | --pf-c-button--disabled--Color | #d2d2d2 | ||
| .pf-c-button.pf-m-plain | --pf-c-button--disabled--BackgroundColor | transparent | ||
| .pf-c-button.pf-m-plain:hover | --pf-c-button--m-plain--Color | #151515 | ||
| .pf-c-button.pf-m-plain:hover | --pf-c-button--m-plain--BackgroundColor | transparent | ||
| .pf-c-button.pf-m-plain:active | --pf-c-button--m-plain--Color | #151515 | ||
| .pf-c-button.pf-m-plain:active | --pf-c-button--m-plain--BackgroundColor | transparent | ||
| .pf-c-button.pf-m-plain:focus | --pf-c-button--m-plain--Color | #151515 | ||
| .pf-c-button.pf-m-plain:focus | --pf-c-button--m-plain--BackgroundColor | transparent | ||
| .pf-c-button:disabled .pf-c-badge | --pf-c-badge--m-unread--Color | #151515 | ||
| .pf-c-button:disabled .pf-c-badge | --pf-c-badge--m-unread--BackgroundColor | #f0f0f0 | ||
| .pf-c-button:disabled .pf-c-badge | --pf-c-button--m-primary__c-badge--BorderWidth | 0 | ||
| .pf-c-button.pf-m-aria-disabled | --pf-c-button--after--BorderWidth | 0 | ||
| .pf-c-button.pf-m-aria-disabled | --pf-c-button--m-link--m-inline--hover--TextDecoration | none | ||
| .pf-c-button.pf-m-progress | --pf-c-button--PaddingRight | calc(1rem + calc(1.125rem + 0.5rem) / 2) | ||
| .pf-c-button.pf-m-progress | --pf-c-button--PaddingLeft | calc(1rem + calc(1.125rem + 0.5rem) / 2) | ||
| .pf-c-button.pf-m-in-progress | --pf-c-button--m-link--m-inline--PaddingLeft | calc(0.25rem + 1rem + 0.5rem) | ||
| .pf-c-button.pf-m-in-progress:not(.pf-m-plain) | --pf-c-button--PaddingRight | 1rem | ||
| .pf-c-button.pf-m-in-progress:not(.pf-m-plain) | --pf-c-button--PaddingLeft | calc(1rem + calc(1.125rem + 0.5rem)) | ||
| .pf-c-button.pf-m-in-progress.pf-m-plain | --pf-c-button--m-plain--Color | #06c | ||
| .pf-c-button.pf-m-in-progress.pf-m-plain | --pf-c-button__progress--Left | 50% | ||
| .pf-c-button.pf-m-in-progress.pf-m-plain | --pf-c-button__progress--TranslateX | -50% | ||
| .pf-c-button__progress .pf-c-spinner | --pf-c-spinner--Color | currentcolor | ||
| .pf-m-overpass-font .pf-c-button | --pf-c-button--FontWeight | 700 | ||
View source on GitHub