Examples
Variant examples
PatternFly supports several button styling variants to be used in different scenarios as needed. The following button variants can be assigned using the variant property.
Variant | Description |
|---|---|
Primary | Primary buttons are the most visually prominent variant. Use for the most important call to action. |
Secondary | Secondary buttons are less visually prominant than primary buttons. Use for general actions on a page that require less emphasis than primary buttons. |
Tertiary | Tertiary buttons are the least visually prominent variant. Use to retain a classic button format with less emphasis than primary or secondary buttons. |
Danger | Danger buttons may be used for actions that are potentially destructive or difficult/impossible to undo. Danger is an independent variant, but all button variants may use the the isDanger property to apply similar styling. |
Warning | Warning buttons may be used for actions that change an important setting or behavior, but not in a destructive or irreversible way. |
Link | Links are labeled, but have no background or border. Use for actions that require less emphasis, actions that navigate users to another page within the same window, and/or actions that navigate to external pages in a new window. Links may be placed inline with text using the isInline property. |
Plain | Plain buttons have no styling and are intended to be labeled with icons. |
Control | Control buttons can be labeled with text or icons. Primarily intended to be paired with other controls in an input group. |
Disabled buttons
To indicate that an action is currently unavailable, all button variations can be disabled using the isDisabled property.
Small buttons
To fit into tight spaces, primary, secondary, tertiary, danger, and warning button variations can be made smaller using the isSmall property.
Call to action (CTA) buttons
CTA buttons and links direct users to complete an action. Primary, secondary, tertiary, and link button variants can be styled as CTAs using the isLarge property.
Block level buttons
Block level buttons span the full width of the parent element and can be enabled using the isBlock property.
Progress indicators
Progress indicators can be added to buttons to identify that an action is in progress after a click.
Links as buttons
Buttons that link to another resource may take the form of primary, secondary, tertiary, or link variants. Use component="a" and an href property to designate the button's target link.
Inline link as span
Inline links should use component="span" and the isInline property to wrap inline with surrounding text.
Router link
Router links can be used for in-app linking in React environments to prevent page reloading.
Aria-disabled examples
Accessible Rich Internet Applications (ARIA) is a set of roles and attributes specified by the World Wide Web Consortium. ARIA defines ways to make web content and web applications more accessible to people with disabilities.
Buttons that are aria-disabled are similar to normal disabled buttons, except they can receive focus. Every button variant can be aria-disabled using the isAriaDisabled property.
Aria-disabled with tooltip
Unlike normal disabled buttons, aria-disabled buttons can support tooltips.
Aria-disabled link as button with tooltip
Aria-disabled buttons can operate as links, which also support tooltips.
Props
Button
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | Adds accessible text to the button. | |
| children | React.ReactNode | Content rendered inside the button | |
| className | string | Additional classes added to the button | |
| component | React.ElementType<any> | React.ComponentType<any> | Sets the base component to render. defaults to button | |
| icon | React.ReactNode | null | Icon for the button. Usable by all variants except for plain. | |
| iconPosition | 'left' | 'right' | Sets position of the link icon | |
| innerRef | React.Ref<any> | Forwarded ref | |
| inoperableEvents | string[] | Events to prevent when the button is in an aria-disabled state | |
| isActive | boolean | Adds active styling to button. | |
| isAriaDisabled | boolean | Adds disabled styling and communicates that the button is disabled using the aria-disabled html attribute | |
| isBlock | boolean | Adds block styling to button | |
| isDanger | boolean | Adds danger styling to secondary or link button variants | |
| isDisabled | boolean | Adds disabled styling and disables the button using the disabled html attribute | |
| isInline | boolean | Adds inline styling to a link button | |
| isLarge | boolean | Adds large styling to the button | |
| isLoading | boolean | Adds progress styling to button | |
| isSmall | boolean | Adds small styling to the button | |
| spinnerAriaLabel | string | Accessible label for the spinner to describe what is loading | |
| spinnerAriaLabelledBy | string | Id of element which describes what is being loaded | |
| spinnerAriaValueText | string | Text describing that current loading status or progress | |
| tabIndex | number | Sets the button tabindex. | |
| type | 'button' | 'submit' | 'reset' | Sets button type | |
| variant | 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control' | Adds button variant styles |
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-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: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: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
