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 "sm" value for the size 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 "lg" value for the size 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.
Unlike normal disabled buttons, aria-disabled buttons can support tooltips. Furthermore, aria-disabled buttons can operate as links, which also support tooltips.
Button with count
Buttons can display a count in the form of a badge to indicate some value or number by passing in the countOptions prop as a BadgeCountObject object. The BadgeCountObject object will handle count, isRead, and className props for the badge count.
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 | |
| countOptions | BadgeCountObject | Adds count number to button | |
| icon | React.ReactNode | null | Icon for the button. Usable by all variants except for plain. | |
| iconPosition | 'start' | 'end' | 'left' | 'right' | Sets position of the icon. Note: "left" and "right" are deprecated. Use "start" and "end" instead | |
| 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 | |
| isLoading | boolean | Adds progress styling to button | |
| ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
| ouiaSafe | boolean | Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. | |
| size | 'default' | 'sm' | 'lg' | Adds styling which affects the size of 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 |
BadgeCountObject
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | Additional classes added to the badge count | |
| count | number | Adds count number right of button | |
| isRead | boolean | Adds styling to the badge to indicate it has been read |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-button | --pf-v5-c-button--PaddingTop | 0.375rem | ||
--pf-v5-c-button--PaddingTop --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem | ||||
| .pf-v5-c-button | --pf-v5-c-button--PaddingRight | 1rem | ||
--pf-v5-c-button--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-button | --pf-v5-c-button--PaddingBottom | 0.375rem | ||
--pf-v5-c-button--PaddingBottom --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem | ||||
| .pf-v5-c-button | --pf-v5-c-button--PaddingLeft | 1rem | ||
--pf-v5-c-button--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-button | --pf-v5-c-button--LineHeight | 1.5 | ||
--pf-v5-c-button--LineHeight --pf-v5-global--LineHeight--md $pf-v5-global--LineHeight--md 1.5 | ||||
| .pf-v5-c-button | --pf-v5-c-button--FontWeight | 400 | ||
--pf-v5-c-button--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
| .pf-v5-c-button | --pf-v5-c-button--FontSize | 1rem | ||
--pf-v5-c-button--FontSize --pf-v5-global--FontSize--md $pf-v5-global--FontSize--md pf-font-prem(16px) 1rem | ||||
| .pf-v5-c-button | --pf-v5-c-button--BackgroundColor | transparent | ||
| .pf-v5-c-button | --pf-v5-c-button--BorderRadius | 3px | ||
--pf-v5-c-button--BorderRadius --pf-v5-global--BorderRadius--sm $pf-v5-global--BorderRadius--sm 3px | ||||
| .pf-v5-c-button | --pf-v5-c-button--after--BorderRadius | 3px | ||
--pf-v5-c-button--after--BorderRadius --pf-v5-global--BorderRadius--sm $pf-v5-global--BorderRadius--sm 3px | ||||
| .pf-v5-c-button | --pf-v5-c-button--after--BorderColor | transparent | ||
| .pf-v5-c-button | --pf-v5-c-button--after--BorderWidth | 1px | ||
--pf-v5-c-button--after--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-button | --pf-v5-c-button--hover--after--BorderWidth | 2px | ||
--pf-v5-c-button--hover--after--BorderWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-button | --pf-v5-c-button--focus--after--BorderWidth | 2px | ||
--pf-v5-c-button--focus--after--BorderWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-button | --pf-v5-c-button--active--after--BorderWidth | 2px | ||
--pf-v5-c-button--active--after--BorderWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-button | --pf-v5-c-button--disabled--Color | #6a6e73 | ||
--pf-v5-c-button--disabled--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-button | --pf-v5-c-button--disabled--BackgroundColor | #d2d2d2 | ||
--pf-v5-c-button--disabled--BackgroundColor --pf-v5-global--disabled-color--200 $pf-v5-global--disabled-color--200 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-button | --pf-v5-c-button--disabled--after--BorderColor | transparent | ||
| .pf-v5-c-button | --pf-v5-c-button--m-primary--BackgroundColor | #06c | ||
--pf-v5-c-button--m-primary--BackgroundColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-primary--Color | #fff | ||
--pf-v5-c-button--m-primary--Color --pf-v5-global--Color--light-100 $pf-v5-global--Color--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-primary--hover--BackgroundColor | #004080 | ||
--pf-v5-c-button--m-primary--hover--BackgroundColor --pf-v5-global--primary-color--200 $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-primary--hover--Color | #fff | ||
--pf-v5-c-button--m-primary--hover--Color --pf-v5-global--Color--light-100 $pf-v5-global--Color--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-primary--focus--BackgroundColor | #004080 | ||
--pf-v5-c-button--m-primary--focus--BackgroundColor --pf-v5-global--primary-color--200 $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-primary--focus--Color | #fff | ||
--pf-v5-c-button--m-primary--focus--Color --pf-v5-global--Color--light-100 $pf-v5-global--Color--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-primary--active--BackgroundColor | #004080 | ||
--pf-v5-c-button--m-primary--active--BackgroundColor --pf-v5-global--primary-color--200 $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-primary--active--Color | #fff | ||
--pf-v5-c-button--m-primary--active--Color --pf-v5-global--Color--light-100 $pf-v5-global--Color--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-secondary--BackgroundColor | transparent | ||
| .pf-v5-c-button | --pf-v5-c-button--m-secondary--after--BorderColor | #06c | ||
--pf-v5-c-button--m-secondary--after--BorderColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-secondary--Color | #06c | ||
--pf-v5-c-button--m-secondary--Color --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-secondary--hover--BackgroundColor | transparent | ||
| .pf-v5-c-button | --pf-v5-c-button--m-secondary--hover--after--BorderColor | #06c | ||
--pf-v5-c-button--m-secondary--hover--after--BorderColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-secondary--hover--Color | #06c | ||
--pf-v5-c-button--m-secondary--hover--Color --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-secondary--focus--BackgroundColor | transparent | ||
| .pf-v5-c-button | --pf-v5-c-button--m-secondary--focus--after--BorderColor | #06c | ||
--pf-v5-c-button--m-secondary--focus--after--BorderColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-secondary--focus--Color | #06c | ||
--pf-v5-c-button--m-secondary--focus--Color --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-secondary--active--BackgroundColor | transparent | ||
| .pf-v5-c-button | --pf-v5-c-button--m-secondary--active--after--BorderColor | #06c | ||
--pf-v5-c-button--m-secondary--active--after--BorderColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-secondary--active--Color | #06c | ||
--pf-v5-c-button--m-secondary--active--Color --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-secondary--m-danger--BackgroundColor | transparent | ||
| .pf-v5-c-button | --pf-v5-c-button--m-secondary--m-danger--Color | #c9190b | ||
--pf-v5-c-button--m-secondary--m-danger--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-secondary--m-danger--after--BorderColor | #c9190b | ||
--pf-v5-c-button--m-secondary--m-danger--after--BorderColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-secondary--m-danger--hover--BackgroundColor | transparent | ||
| .pf-v5-c-button | --pf-v5-c-button--m-secondary--m-danger--hover--Color | #a30000 | ||
--pf-v5-c-button--m-secondary--m-danger--hover--Color --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-secondary--m-danger--hover--after--BorderColor | #c9190b | ||
--pf-v5-c-button--m-secondary--m-danger--hover--after--BorderColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-secondary--m-danger--focus--BackgroundColor | transparent | ||
| .pf-v5-c-button | --pf-v5-c-button--m-secondary--m-danger--focus--Color | #a30000 | ||
--pf-v5-c-button--m-secondary--m-danger--focus--Color --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-secondary--m-danger--focus--after--BorderColor | #c9190b | ||
--pf-v5-c-button--m-secondary--m-danger--focus--after--BorderColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-secondary--m-danger--active--BackgroundColor | transparent | ||
| .pf-v5-c-button | --pf-v5-c-button--m-secondary--m-danger--active--Color | #a30000 | ||
--pf-v5-c-button--m-secondary--m-danger--active--Color --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-secondary--m-danger--active--after--BorderColor | #c9190b | ||
--pf-v5-c-button--m-secondary--m-danger--active--after--BorderColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-tertiary--BackgroundColor | transparent | ||
| .pf-v5-c-button | --pf-v5-c-button--m-tertiary--after--BorderColor | #151515 | ||
--pf-v5-c-button--m-tertiary--after--BorderColor --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-tertiary--Color | #151515 | ||
--pf-v5-c-button--m-tertiary--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-tertiary--hover--BackgroundColor | transparent | ||
| .pf-v5-c-button | --pf-v5-c-button--m-tertiary--hover--after--BorderColor | #151515 | ||
--pf-v5-c-button--m-tertiary--hover--after--BorderColor --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-tertiary--hover--Color | #151515 | ||
--pf-v5-c-button--m-tertiary--hover--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-tertiary--focus--BackgroundColor | transparent | ||
| .pf-v5-c-button | --pf-v5-c-button--m-tertiary--focus--after--BorderColor | #151515 | ||
--pf-v5-c-button--m-tertiary--focus--after--BorderColor --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-tertiary--focus--Color | #151515 | ||
--pf-v5-c-button--m-tertiary--focus--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-tertiary--active--BackgroundColor | transparent | ||
| .pf-v5-c-button | --pf-v5-c-button--m-tertiary--active--after--BorderColor | #151515 | ||
--pf-v5-c-button--m-tertiary--active--after--BorderColor --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-tertiary--active--Color | #151515 | ||
--pf-v5-c-button--m-tertiary--active--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-warning--BackgroundColor | #f0ab00 | ||
--pf-v5-c-button--m-warning--BackgroundColor --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-warning--Color | #151515 | ||
--pf-v5-c-button--m-warning--Color --pf-v5-global--Color--dark-100 $pf-v5-global--Color--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-warning--hover--BackgroundColor | #c58c00 | ||
--pf-v5-c-button--m-warning--hover--BackgroundColor --pf-v5-global--palette--gold-500 $pf-v5-color-gold-500 #c58c00 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-warning--hover--Color | #151515 | ||
--pf-v5-c-button--m-warning--hover--Color --pf-v5-global--Color--dark-100 $pf-v5-global--Color--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-warning--focus--BackgroundColor | #c58c00 | ||
--pf-v5-c-button--m-warning--focus--BackgroundColor --pf-v5-global--palette--gold-500 $pf-v5-color-gold-500 #c58c00 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-warning--focus--Color | #151515 | ||
--pf-v5-c-button--m-warning--focus--Color --pf-v5-global--Color--dark-100 $pf-v5-global--Color--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-warning--active--BackgroundColor | #c58c00 | ||
--pf-v5-c-button--m-warning--active--BackgroundColor --pf-v5-global--palette--gold-500 $pf-v5-color-gold-500 #c58c00 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-warning--active--Color | #151515 | ||
--pf-v5-c-button--m-warning--active--Color --pf-v5-global--Color--dark-100 $pf-v5-global--Color--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-danger--BackgroundColor | #c9190b | ||
--pf-v5-c-button--m-danger--BackgroundColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-danger--Color | #fff | ||
--pf-v5-c-button--m-danger--Color --pf-v5-global--Color--light-100 $pf-v5-global--Color--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-danger--hover--BackgroundColor | #a30000 | ||
--pf-v5-c-button--m-danger--hover--BackgroundColor --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-danger--hover--Color | #fff | ||
--pf-v5-c-button--m-danger--hover--Color --pf-v5-global--Color--light-100 $pf-v5-global--Color--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-danger--focus--BackgroundColor | #a30000 | ||
--pf-v5-c-button--m-danger--focus--BackgroundColor --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-danger--focus--Color | #fff | ||
--pf-v5-c-button--m-danger--focus--Color --pf-v5-global--Color--light-100 $pf-v5-global--Color--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-danger--active--BackgroundColor | #a30000 | ||
--pf-v5-c-button--m-danger--active--BackgroundColor --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-danger--active--Color | #fff | ||
--pf-v5-c-button--m-danger--active--Color --pf-v5-global--Color--light-100 $pf-v5-global--Color--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-link--BackgroundColor | transparent | ||
| .pf-v5-c-button | --pf-v5-c-button--m-link--Color | #06c | ||
--pf-v5-c-button--m-link--Color --pf-v5-global--link--Color $pf-v5-global--link--Color $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-link--hover--BackgroundColor | transparent | ||
| .pf-v5-c-button | --pf-v5-c-button--m-link--hover--Color | #004080 | ||
--pf-v5-c-button--m-link--hover--Color --pf-v5-global--link--Color--hover $pf-v5-global--link--Color--hover $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-link--focus--BackgroundColor | transparent | ||
| .pf-v5-c-button | --pf-v5-c-button--m-link--focus--Color | #004080 | ||
--pf-v5-c-button--m-link--focus--Color --pf-v5-global--link--Color--hover $pf-v5-global--link--Color--hover $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-link--active--BackgroundColor | transparent | ||
| .pf-v5-c-button | --pf-v5-c-button--m-link--active--Color | #004080 | ||
--pf-v5-c-button--m-link--active--Color --pf-v5-global--link--Color--hover $pf-v5-global--link--Color--hover $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-link--disabled--BackgroundColor | transparent | ||
| .pf-v5-c-button | --pf-v5-c-button--m-link--disabled--Color | #6a6e73 | ||
--pf-v5-c-button--m-link--disabled--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-link--m-inline--FontSize | inherit | ||
| .pf-v5-c-button | --pf-v5-c-button--m-link--m-inline--hover--TextDecoration | underline | ||
--pf-v5-c-button--m-link--m-inline--hover--TextDecoration --pf-v5-global--link--TextDecoration--hover $pf-v5-global--link--TextDecoration--hover underline | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-link--m-inline--hover--Color | #004080 | ||
--pf-v5-c-button--m-link--m-inline--hover--Color --pf-v5-global--link--Color--hover $pf-v5-global--link--Color--hover $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-link--m-inline--PaddingTop | 0 | ||
| .pf-v5-c-button | --pf-v5-c-button--m-link--m-inline--PaddingRight | 0 | ||
| .pf-v5-c-button | --pf-v5-c-button--m-link--m-inline--PaddingBottom | 0 | ||
| .pf-v5-c-button | --pf-v5-c-button--m-link--m-inline--PaddingLeft | 0 | ||
| .pf-v5-c-button | --pf-v5-c-button--m-link--m-inline__progress--Left | 0.25rem | ||
--pf-v5-c-button--m-link--m-inline__progress--Left --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-link--m-inline--m-in-progress--PaddingLeft | calc(0.25rem + 1rem + 0.5rem) | ||
--pf-v5-c-button--m-link--m-inline--m-in-progress--PaddingLeft calc(--pf-v5-c-button--m-link--m-inline__progress--Left + 1rem + --pf-v5-global--spacer--sm) calc(--pf-v5-global--spacer--xs + 1rem + $pf-v5-global--spacer--sm) calc($pf-v5-global--spacer--xs + 1rem + $pf-v5-global--spacer--sm) calc(pf-size-prem(4px) + 1rem + pf-size-prem(8px)) calc(0.25rem + 1rem + 0.5rem) | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-link--m-danger--BackgroundColor | transparent | ||
| .pf-v5-c-button | --pf-v5-c-button--m-link--m-danger--Color | #c9190b | ||
--pf-v5-c-button--m-link--m-danger--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-link--m-danger--hover--BackgroundColor | transparent | ||
| .pf-v5-c-button | --pf-v5-c-button--m-link--m-danger--hover--Color | #a30000 | ||
--pf-v5-c-button--m-link--m-danger--hover--Color --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-link--m-danger--focus--BackgroundColor | transparent | ||
| .pf-v5-c-button | --pf-v5-c-button--m-link--m-danger--focus--Color | #a30000 | ||
--pf-v5-c-button--m-link--m-danger--focus--Color --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-link--m-danger--active--BackgroundColor | transparent | ||
| .pf-v5-c-button | --pf-v5-c-button--m-link--m-danger--active--Color | #a30000 | ||
--pf-v5-c-button--m-link--m-danger--active--Color --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-plain--BackgroundColor | transparent | ||
| .pf-v5-c-button | --pf-v5-c-button--m-plain--Color | #6a6e73 | ||
--pf-v5-c-button--m-plain--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-plain--hover--BackgroundColor | transparent | ||
| .pf-v5-c-button | --pf-v5-c-button--m-plain--hover--Color | #151515 | ||
--pf-v5-c-button--m-plain--hover--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-plain--focus--BackgroundColor | transparent | ||
| .pf-v5-c-button | --pf-v5-c-button--m-plain--focus--Color | #151515 | ||
--pf-v5-c-button--m-plain--focus--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-plain--active--BackgroundColor | transparent | ||
| .pf-v5-c-button | --pf-v5-c-button--m-plain--active--Color | #151515 | ||
--pf-v5-c-button--m-plain--active--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-plain--disabled--Color | #d2d2d2 | ||
--pf-v5-c-button--m-plain--disabled--Color --pf-v5-global--disabled-color--200 $pf-v5-global--disabled-color--200 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-plain--disabled--BackgroundColor | transparent | ||
| .pf-v5-c-button | --pf-v5-c-button--m-control--BackgroundColor | #fff | ||
--pf-v5-c-button--m-control--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-control--Color | #151515 | ||
--pf-v5-c-button--m-control--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-control--BorderRadius | 0 | ||
| .pf-v5-c-button | --pf-v5-c-button--m-control--after--BorderWidth | 1px | ||
--pf-v5-c-button--m-control--after--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-control--after--BorderTopColor | #f0f0f0 | ||
--pf-v5-c-button--m-control--after--BorderTopColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-control--after--BorderRightColor | #f0f0f0 | ||
--pf-v5-c-button--m-control--after--BorderRightColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-control--after--BorderBottomColor | #8a8d90 | ||
--pf-v5-c-button--m-control--after--BorderBottomColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-control--after--BorderLeftColor | #f0f0f0 | ||
--pf-v5-c-button--m-control--after--BorderLeftColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-control--disabled--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-button--m-control--disabled--BackgroundColor --pf-v5-global--disabled-color--300 $pf-v5-global--disabled-color--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-control--hover--BackgroundColor | #fff | ||
--pf-v5-c-button--m-control--hover--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-control--hover--Color | #151515 | ||
--pf-v5-c-button--m-control--hover--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-control--hover--after--BorderBottomWidth | 2px | ||
--pf-v5-c-button--m-control--hover--after--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-control--hover--after--BorderBottomColor | #06c | ||
--pf-v5-c-button--m-control--hover--after--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-control--active--BackgroundColor | #fff | ||
--pf-v5-c-button--m-control--active--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-control--active--Color | #151515 | ||
--pf-v5-c-button--m-control--active--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-control--active--after--BorderBottomWidth | 2px | ||
--pf-v5-c-button--m-control--active--after--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-control--active--after--BorderBottomColor | #06c | ||
--pf-v5-c-button--m-control--active--after--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-control--focus--BackgroundColor | #fff | ||
--pf-v5-c-button--m-control--focus--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-control--focus--Color | #151515 | ||
--pf-v5-c-button--m-control--focus--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-control--focus--after--BorderBottomWidth | 2px | ||
--pf-v5-c-button--m-control--focus--after--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-control--focus--after--BorderBottomColor | #06c | ||
--pf-v5-c-button--m-control--focus--after--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-control--m-expanded--BackgroundColor | #fff | ||
--pf-v5-c-button--m-control--m-expanded--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-control--m-expanded--Color | #151515 | ||
--pf-v5-c-button--m-control--m-expanded--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-control--m-expanded--after--BorderBottomWidth | 2px | ||
--pf-v5-c-button--m-control--m-expanded--after--BorderBottomWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-control--m-expanded--after--BorderBottomColor | #06c | ||
--pf-v5-c-button--m-control--m-expanded--after--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-small--FontSize | 0.875rem | ||
--pf-v5-c-button--m-small--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-display-lg--PaddingTop | 1rem | ||
--pf-v5-c-button--m-display-lg--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-display-lg--PaddingRight | 2rem | ||
--pf-v5-c-button--m-display-lg--PaddingRight --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-display-lg--PaddingBottom | 1rem | ||
--pf-v5-c-button--m-display-lg--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-display-lg--PaddingLeft | 2rem | ||
--pf-v5-c-button--m-display-lg--PaddingLeft --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-display-lg--FontWeight | 700 | ||
--pf-v5-c-button--m-display-lg--FontWeight --pf-v5-global--FontWeight--bold $pf-v5-global--FontWeight--bold 700 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-link--m-display-lg--FontSize | 1.125rem | ||
--pf-v5-c-button--m-link--m-display-lg--FontSize --pf-v5-global--FontSize--lg $pf-v5-global--FontSize--lg pf-font-prem(18px) 1.125rem | ||||
| .pf-v5-c-button | --pf-v5-c-button__icon--m-start--MarginRight | 0.25rem | ||
--pf-v5-c-button__icon--m-start--MarginRight --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-button | --pf-v5-c-button__icon--m-end--MarginLeft | 0.25rem | ||
--pf-v5-c-button__icon--m-end--MarginLeft --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-button | --pf-v5-c-button__progress--width | calc(1rem + 0.5rem) | ||
--pf-v5-c-button__progress--width calc(--pf-v5-global--icon--FontSize--md + --pf-v5-global--spacer--sm) calc($pf-v5-global--icon--FontSize--md + $pf-v5-global--spacer--sm) calc(pf-font-prem(16px) + pf-size-prem(8px)) calc(1rem + 0.5rem) | ||||
| .pf-v5-c-button | --pf-v5-c-button__progress--Opacity | 0 | ||
| .pf-v5-c-button | --pf-v5-c-button__progress--TranslateY | -50% | ||
| .pf-v5-c-button | --pf-v5-c-button__progress--TranslateX | 0 | ||
| .pf-v5-c-button | --pf-v5-c-button__progress--Top | 50% | ||
| .pf-v5-c-button | --pf-v5-c-button__progress--Left | 1rem | ||
--pf-v5-c-button__progress--Left --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-progress--TransitionProperty | padding | ||
| .pf-v5-c-button | --pf-v5-c-button--m-progress--TransitionDuration | 250ms | ||
--pf-v5-c-button--m-progress--TransitionDuration --pf-v5-global--TransitionDuration $pf-v5-global--TransitionDuration 250ms | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-progress--PaddingRight | calc(1rem + calc(1rem + 0.5rem) / 2) | ||
--pf-v5-c-button--m-progress--PaddingRight calc(--pf-v5-global--spacer--md + --pf-v5-c-button__progress--width / 2) calc($pf-v5-global--spacer--md + calc(--pf-v5-global--icon--FontSize--md + --pf-v5-global--spacer--sm) / 2) calc($pf-v5-global--spacer--md + calc($pf-v5-global--icon--FontSize--md + $pf-v5-global--spacer--sm) / 2) calc(pf-size-prem(16px) + calc(pf-font-prem(16px) + pf-size-prem(8px)) / 2) calc(1rem + calc(1rem + 0.5rem) / 2) | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-progress--PaddingLeft | calc(1rem + calc(1rem + 0.5rem) / 2) | ||
--pf-v5-c-button--m-progress--PaddingLeft calc(--pf-v5-global--spacer--md + --pf-v5-c-button__progress--width / 2) calc($pf-v5-global--spacer--md + calc(--pf-v5-global--icon--FontSize--md + --pf-v5-global--spacer--sm) / 2) calc($pf-v5-global--spacer--md + calc($pf-v5-global--icon--FontSize--md + $pf-v5-global--spacer--sm) / 2) calc(pf-size-prem(16px) + calc(pf-font-prem(16px) + pf-size-prem(8px)) / 2) calc(1rem + calc(1rem + 0.5rem) / 2) | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-in-progress--PaddingRight | 1rem | ||
--pf-v5-c-button--m-in-progress--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-in-progress--PaddingLeft | calc(1rem + calc(1rem + 0.5rem)) | ||
--pf-v5-c-button--m-in-progress--PaddingLeft calc(--pf-v5-global--spacer--md + --pf-v5-c-button__progress--width) calc($pf-v5-global--spacer--md + calc(--pf-v5-global--icon--FontSize--md + --pf-v5-global--spacer--sm)) calc($pf-v5-global--spacer--md + calc($pf-v5-global--icon--FontSize--md + $pf-v5-global--spacer--sm)) calc(pf-size-prem(16px) + calc(pf-font-prem(16px) + pf-size-prem(8px))) calc(1rem + calc(1rem + 0.5rem)) | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-in-progress--m-plain--Color | #06c | ||
--pf-v5-c-button--m-in-progress--m-plain--Color --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-in-progress--m-plain__progress--Left | 50% | ||
| .pf-v5-c-button | --pf-v5-c-button--m-in-progress--m-plain__progress--TranslateX | -50% | ||
| .pf-v5-c-button | --pf-v5-c-button__count--MarginLeft | 0.5rem | ||
--pf-v5-c-button__count--MarginLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-button | --pf-v5-c-button--disabled__c-badge--Color | #151515 | ||
--pf-v5-c-button--disabled__c-badge--Color --pf-v5-global--Color--dark-100 $pf-v5-global--Color--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button | --pf-v5-c-button--disabled__c-badge--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-button--disabled__c-badge--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-primary__c-badge--BorderColor | #f0f0f0 | ||
--pf-v5-c-button--m-primary__c-badge--BorderColor --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-button | --pf-v5-c-button--m-primary__c-badge--BorderWidth | 1px | ||
--pf-v5-c-button--m-primary__c-badge--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-button:hover | --pf-v5-c-button--after--BorderWidth | 2px | ||
--pf-v5-c-button--after--BorderWidth --pf-v5-c-button--hover--after--BorderWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-button:focus | --pf-v5-c-button--after--BorderWidth | 2px | ||
--pf-v5-c-button--after--BorderWidth --pf-v5-c-button--focus--after--BorderWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-button:active | --pf-v5-c-button--after--BorderWidth | 2px | ||
--pf-v5-c-button--after--BorderWidth --pf-v5-c-button--active--after--BorderWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-button.pf-m-small | --pf-v5-c-button--FontSize | 0.875rem | ||
--pf-v5-c-button--FontSize --pf-v5-c-button--m-small--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-button.pf-m-primary.pf-m-display-lg | --pf-v5-c-button--PaddingTop | 1rem | ||
--pf-v5-c-button--PaddingTop --pf-v5-c-button--m-display-lg--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-button.pf-m-primary.pf-m-display-lg | --pf-v5-c-button--PaddingRight | 2rem | ||
--pf-v5-c-button--PaddingRight --pf-v5-c-button--m-display-lg--PaddingRight --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-button.pf-m-primary.pf-m-display-lg | --pf-v5-c-button--PaddingBottom | 1rem | ||
--pf-v5-c-button--PaddingBottom --pf-v5-c-button--m-display-lg--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-button.pf-m-primary.pf-m-display-lg | --pf-v5-c-button--PaddingLeft | 2rem | ||
--pf-v5-c-button--PaddingLeft --pf-v5-c-button--m-display-lg--PaddingLeft --pf-v5-global--spacer--xl $pf-v5-global--spacer--xl pf-size-prem(32px) 2rem | ||||
| .pf-v5-c-button.pf-m-primary.pf-m-display-lg | --pf-v5-c-button--FontWeight | 700 | ||
--pf-v5-c-button--FontWeight --pf-v5-c-button--m-display-lg--FontWeight --pf-v5-global--FontWeight--bold $pf-v5-global--FontWeight--bold 700 | ||||
| .pf-v5-c-button.pf-m-primary:hover | --pf-v5-c-button--m-primary--Color | #fff | ||
--pf-v5-c-button--m-primary--Color --pf-v5-c-button--m-primary--hover--Color --pf-v5-global--Color--light-100 $pf-v5-global--Color--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-button.pf-m-primary:hover | --pf-v5-c-button--m-primary--BackgroundColor | #004080 | ||
--pf-v5-c-button--m-primary--BackgroundColor --pf-v5-c-button--m-primary--hover--BackgroundColor --pf-v5-global--primary-color--200 $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-button.pf-m-primary:focus | --pf-v5-c-button--m-primary--Color | #fff | ||
--pf-v5-c-button--m-primary--Color --pf-v5-c-button--m-primary--focus--Color --pf-v5-global--Color--light-100 $pf-v5-global--Color--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-button.pf-m-primary:focus | --pf-v5-c-button--m-primary--BackgroundColor | #004080 | ||
--pf-v5-c-button--m-primary--BackgroundColor --pf-v5-c-button--m-primary--focus--BackgroundColor --pf-v5-global--primary-color--200 $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-button.pf-m-primary:active | --pf-v5-c-button--m-primary--Color | #fff | ||
--pf-v5-c-button--m-primary--Color --pf-v5-c-button--m-primary--active--Color --pf-v5-global--Color--light-100 $pf-v5-global--Color--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-button.pf-m-primary:active | --pf-v5-c-button--m-primary--BackgroundColor | #004080 | ||
--pf-v5-c-button--m-primary--BackgroundColor --pf-v5-c-button--m-primary--active--BackgroundColor --pf-v5-global--primary-color--200 $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-button.pf-m-secondary | --pf-v5-c-button--after--BorderColor | #06c | ||
--pf-v5-c-button--after--BorderColor --pf-v5-c-button--m-secondary--after--BorderColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-button.pf-m-secondary:hover | --pf-v5-c-button--m-secondary--Color | #06c | ||
--pf-v5-c-button--m-secondary--Color --pf-v5-c-button--m-secondary--hover--Color --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-button.pf-m-secondary:hover | --pf-v5-c-button--m-secondary--BackgroundColor | transparent | ||
--pf-v5-c-button--m-secondary--BackgroundColor --pf-v5-c-button--m-secondary--hover--BackgroundColor transparent | ||||
| .pf-v5-c-button.pf-m-secondary:hover | --pf-v5-c-button--after--BorderColor | #06c | ||
--pf-v5-c-button--after--BorderColor --pf-v5-c-button--m-secondary--hover--after--BorderColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-button.pf-m-secondary:focus | --pf-v5-c-button--m-secondary--Color | #06c | ||
--pf-v5-c-button--m-secondary--Color --pf-v5-c-button--m-secondary--focus--Color --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-button.pf-m-secondary:focus | --pf-v5-c-button--m-secondary--BackgroundColor | transparent | ||
--pf-v5-c-button--m-secondary--BackgroundColor --pf-v5-c-button--m-secondary--focus--BackgroundColor transparent | ||||
| .pf-v5-c-button.pf-m-secondary:focus | --pf-v5-c-button--after--BorderColor | #06c | ||
--pf-v5-c-button--after--BorderColor --pf-v5-c-button--m-secondary--focus--after--BorderColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-button.pf-m-secondary.pf-m-active | --pf-v5-c-button--m-secondary--Color | #06c | ||
--pf-v5-c-button--m-secondary--Color --pf-v5-c-button--m-secondary--active--Color --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-button.pf-m-secondary.pf-m-active | --pf-v5-c-button--m-secondary--BackgroundColor | transparent | ||
--pf-v5-c-button--m-secondary--BackgroundColor --pf-v5-c-button--m-secondary--active--BackgroundColor transparent | ||||
| .pf-v5-c-button.pf-m-secondary.pf-m-active | --pf-v5-c-button--after--BorderColor | #06c | ||
--pf-v5-c-button--after--BorderColor --pf-v5-c-button--m-secondary--active--after--BorderColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-button.pf-m-tertiary | --pf-v5-c-button--after--BorderColor | #151515 | ||
--pf-v5-c-button--after--BorderColor --pf-v5-c-button--m-tertiary--after--BorderColor --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button.pf-m-tertiary:hover | --pf-v5-c-button--m-tertiary--Color | #151515 | ||
--pf-v5-c-button--m-tertiary--Color --pf-v5-c-button--m-tertiary--hover--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button.pf-m-tertiary:hover | --pf-v5-c-button--m-tertiary--BackgroundColor | transparent | ||
--pf-v5-c-button--m-tertiary--BackgroundColor --pf-v5-c-button--m-tertiary--hover--BackgroundColor transparent | ||||
| .pf-v5-c-button.pf-m-tertiary:hover | --pf-v5-c-button--after--BorderColor | #151515 | ||
--pf-v5-c-button--after--BorderColor --pf-v5-c-button--m-tertiary--hover--after--BorderColor --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button.pf-m-tertiary:focus | --pf-v5-c-button--m-tertiary--Color | #151515 | ||
--pf-v5-c-button--m-tertiary--Color --pf-v5-c-button--m-tertiary--focus--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button.pf-m-tertiary:focus | --pf-v5-c-button--m-tertiary--BackgroundColor | transparent | ||
--pf-v5-c-button--m-tertiary--BackgroundColor --pf-v5-c-button--m-tertiary--focus--BackgroundColor transparent | ||||
| .pf-v5-c-button.pf-m-tertiary:focus | --pf-v5-c-button--after--BorderColor | #151515 | ||
--pf-v5-c-button--after--BorderColor --pf-v5-c-button--m-tertiary--focus--after--BorderColor --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button.pf-m-tertiary:active | --pf-v5-c-button--m-tertiary--Color | #151515 | ||
--pf-v5-c-button--m-tertiary--Color --pf-v5-c-button--m-tertiary--active--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button.pf-m-tertiary:active | --pf-v5-c-button--m-tertiary--BackgroundColor | transparent | ||
--pf-v5-c-button--m-tertiary--BackgroundColor --pf-v5-c-button--m-tertiary--active--BackgroundColor transparent | ||||
| .pf-v5-c-button.pf-m-tertiary:active | --pf-v5-c-button--after--BorderColor | #151515 | ||
--pf-v5-c-button--after--BorderColor --pf-v5-c-button--m-tertiary--active--after--BorderColor --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button.pf-m-link | --pf-v5-c-button--disabled--BackgroundColor | transparent | ||
--pf-v5-c-button--disabled--BackgroundColor --pf-v5-c-button--m-link--disabled--BackgroundColor transparent | ||||
| .pf-v5-c-button.pf-m-link | --pf-v5-c-button--disabled--Color | #6a6e73 | ||
--pf-v5-c-button--disabled--Color --pf-v5-c-button--m-link--disabled--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-button.pf-m-link:not(.pf-m-inline):hover | --pf-v5-c-button--m-link--Color | #004080 | ||
--pf-v5-c-button--m-link--Color --pf-v5-c-button--m-link--hover--Color --pf-v5-global--link--Color--hover $pf-v5-global--link--Color--hover $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-button.pf-m-link:not(.pf-m-inline):hover | --pf-v5-c-button--m-link--BackgroundColor | transparent | ||
--pf-v5-c-button--m-link--BackgroundColor --pf-v5-c-button--m-link--hover--BackgroundColor transparent | ||||
| .pf-v5-c-button.pf-m-link:not(.pf-m-inline):focus | --pf-v5-c-button--m-link--Color | #004080 | ||
--pf-v5-c-button--m-link--Color --pf-v5-c-button--m-link--focus--Color --pf-v5-global--link--Color--hover $pf-v5-global--link--Color--hover $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-button.pf-m-link:not(.pf-m-inline):focus | --pf-v5-c-button--m-link--BackgroundColor | transparent | ||
--pf-v5-c-button--m-link--BackgroundColor --pf-v5-c-button--m-link--focus--BackgroundColor transparent | ||||
| .pf-v5-c-button.pf-m-link:not(.pf-m-inline):active | --pf-v5-c-button--m-link--Color | #004080 | ||
--pf-v5-c-button--m-link--Color --pf-v5-c-button--m-link--active--Color --pf-v5-global--link--Color--hover $pf-v5-global--link--Color--hover $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-button.pf-m-link:not(.pf-m-inline):active | --pf-v5-c-button--m-link--BackgroundColor | transparent | ||
--pf-v5-c-button--m-link--BackgroundColor --pf-v5-c-button--m-link--active--BackgroundColor transparent | ||||
| .pf-v5-c-button.pf-m-link.pf-m-inline | --pf-v5-c-button--FontSize | inherit | ||
--pf-v5-c-button--FontSize --pf-v5-c-button--m-link--m-inline--FontSize inherit | ||||
| .pf-v5-c-button.pf-m-link.pf-m-inline | --pf-v5-c-button__progress--Left | 0.25rem | ||
--pf-v5-c-button__progress--Left --pf-v5-c-button--m-link--m-inline__progress--Left --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-button.pf-m-link.pf-m-inline:hover | --pf-v5-c-button--m-link--Color | #004080 | ||
--pf-v5-c-button--m-link--Color --pf-v5-c-button--m-link--m-inline--hover--Color --pf-v5-global--link--Color--hover $pf-v5-global--link--Color--hover $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-button.pf-m-link.pf-m-display-lg | --pf-v5-c-button--FontSize | 1.125rem | ||
--pf-v5-c-button--FontSize --pf-v5-c-button--m-link--m-display-lg--FontSize --pf-v5-global--FontSize--lg $pf-v5-global--FontSize--lg pf-font-prem(18px) 1.125rem | ||||
| .pf-v5-c-button.pf-m-danger:hover | --pf-v5-c-button--m-danger--Color | #fff | ||
--pf-v5-c-button--m-danger--Color --pf-v5-c-button--m-danger--hover--Color --pf-v5-global--Color--light-100 $pf-v5-global--Color--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-button.pf-m-danger:hover | --pf-v5-c-button--m-danger--BackgroundColor | #a30000 | ||
--pf-v5-c-button--m-danger--BackgroundColor --pf-v5-c-button--m-danger--hover--BackgroundColor --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-button.pf-m-danger:focus | --pf-v5-c-button--m-danger--Color | #fff | ||
--pf-v5-c-button--m-danger--Color --pf-v5-c-button--m-danger--focus--Color --pf-v5-global--Color--light-100 $pf-v5-global--Color--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-button.pf-m-danger:focus | --pf-v5-c-button--m-danger--BackgroundColor | #a30000 | ||
--pf-v5-c-button--m-danger--BackgroundColor --pf-v5-c-button--m-danger--focus--BackgroundColor --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-button.pf-m-danger:active | --pf-v5-c-button--m-danger--Color | #fff | ||
--pf-v5-c-button--m-danger--Color --pf-v5-c-button--m-danger--active--Color --pf-v5-global--Color--light-100 $pf-v5-global--Color--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-button.pf-m-danger:active | --pf-v5-c-button--m-danger--BackgroundColor | #a30000 | ||
--pf-v5-c-button--m-danger--BackgroundColor --pf-v5-c-button--m-danger--active--BackgroundColor --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-button.pf-m-danger.pf-m-secondary | --pf-v5-c-button--m-danger--Color | #c9190b | ||
--pf-v5-c-button--m-danger--Color --pf-v5-c-button--m-secondary--m-danger--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-button.pf-m-danger.pf-m-secondary | --pf-v5-c-button--m-danger--BackgroundColor | transparent | ||
--pf-v5-c-button--m-danger--BackgroundColor --pf-v5-c-button--m-secondary--m-danger--BackgroundColor transparent | ||||
| .pf-v5-c-button.pf-m-danger.pf-m-secondary | --pf-v5-c-button--after--BorderColor | #c9190b | ||
--pf-v5-c-button--after--BorderColor --pf-v5-c-button--m-secondary--m-danger--after--BorderColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-button.pf-m-danger.pf-m-secondary:hover | --pf-v5-c-button--m-secondary--m-danger--Color | #a30000 | ||
--pf-v5-c-button--m-secondary--m-danger--Color --pf-v5-c-button--m-secondary--m-danger--hover--Color --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-button.pf-m-danger.pf-m-secondary:hover | --pf-v5-c-button--m-secondary--m-danger--BackgroundColor | transparent | ||
--pf-v5-c-button--m-secondary--m-danger--BackgroundColor --pf-v5-c-button--m-secondary--m-danger--hover--BackgroundColor transparent | ||||
| .pf-v5-c-button.pf-m-danger.pf-m-secondary:hover | --pf-v5-c-button--after--BorderColor | #c9190b | ||
--pf-v5-c-button--after--BorderColor --pf-v5-c-button--m-secondary--m-danger--hover--after--BorderColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-button.pf-m-danger.pf-m-secondary:focus | --pf-v5-c-button--m-secondary--m-danger--Color | #a30000 | ||
--pf-v5-c-button--m-secondary--m-danger--Color --pf-v5-c-button--m-secondary--m-danger--focus--Color --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-button.pf-m-danger.pf-m-secondary:focus | --pf-v5-c-button--m-secondary--m-danger--BackgroundColor | transparent | ||
--pf-v5-c-button--m-secondary--m-danger--BackgroundColor --pf-v5-c-button--m-secondary--m-danger--focus--BackgroundColor transparent | ||||
| .pf-v5-c-button.pf-m-danger.pf-m-secondary:focus | --pf-v5-c-button--after--BorderColor | #c9190b | ||
--pf-v5-c-button--after--BorderColor --pf-v5-c-button--m-secondary--m-danger--focus--after--BorderColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-button.pf-m-danger.pf-m-secondary:active | --pf-v5-c-button--m-secondary--m-danger--Color | #a30000 | ||
--pf-v5-c-button--m-secondary--m-danger--Color --pf-v5-c-button--m-secondary--m-danger--active--Color --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-button.pf-m-danger.pf-m-secondary:active | --pf-v5-c-button--m-secondary--m-danger--BackgroundColor | transparent | ||
--pf-v5-c-button--m-secondary--m-danger--BackgroundColor --pf-v5-c-button--m-secondary--m-danger--active--BackgroundColor transparent | ||||
| .pf-v5-c-button.pf-m-danger.pf-m-secondary:active | --pf-v5-c-button--after--BorderColor | #c9190b | ||
--pf-v5-c-button--after--BorderColor --pf-v5-c-button--m-secondary--m-danger--active--after--BorderColor --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-button.pf-m-danger.pf-m-link | --pf-v5-c-button--m-danger--Color | #c9190b | ||
--pf-v5-c-button--m-danger--Color --pf-v5-c-button--m-link--m-danger--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-button.pf-m-danger.pf-m-link | --pf-v5-c-button--m-danger--BackgroundColor | transparent | ||
--pf-v5-c-button--m-danger--BackgroundColor --pf-v5-c-button--m-link--m-danger--BackgroundColor transparent | ||||
| .pf-v5-c-button.pf-m-danger.pf-m-link:hover | --pf-v5-c-button--m-link--m-danger--Color | #a30000 | ||
--pf-v5-c-button--m-link--m-danger--Color --pf-v5-c-button--m-link--m-danger--hover--Color --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-button.pf-m-danger.pf-m-link:hover | --pf-v5-c-button--m-link--m-danger--BackgroundColor | transparent | ||
--pf-v5-c-button--m-link--m-danger--BackgroundColor --pf-v5-c-button--m-link--m-danger--hover--BackgroundColor transparent | ||||
| .pf-v5-c-button.pf-m-danger.pf-m-link:focus | --pf-v5-c-button--m-link--m-danger--Color | #a30000 | ||
--pf-v5-c-button--m-link--m-danger--Color --pf-v5-c-button--m-link--m-danger--focus--Color --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-button.pf-m-danger.pf-m-link:focus | --pf-v5-c-button--m-link--m-danger--BackgroundColor | transparent | ||
--pf-v5-c-button--m-link--m-danger--BackgroundColor --pf-v5-c-button--m-link--m-danger--focus--BackgroundColor transparent | ||||
| .pf-v5-c-button.pf-m-danger.pf-m-link:active | --pf-v5-c-button--m-link--m-danger--Color | #a30000 | ||
--pf-v5-c-button--m-link--m-danger--Color --pf-v5-c-button--m-link--m-danger--active--Color --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-button.pf-m-danger.pf-m-link:active | --pf-v5-c-button--m-link--m-danger--BackgroundColor | transparent | ||
--pf-v5-c-button--m-link--m-danger--BackgroundColor --pf-v5-c-button--m-link--m-danger--active--BackgroundColor transparent | ||||
| .pf-v5-c-button.pf-m-warning:hover | --pf-v5-c-button--m-warning--Color | #151515 | ||
--pf-v5-c-button--m-warning--Color --pf-v5-c-button--m-warning--hover--Color --pf-v5-global--Color--dark-100 $pf-v5-global--Color--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button.pf-m-warning:hover | --pf-v5-c-button--m-warning--BackgroundColor | #c58c00 | ||
--pf-v5-c-button--m-warning--BackgroundColor --pf-v5-c-button--m-warning--hover--BackgroundColor --pf-v5-global--palette--gold-500 $pf-v5-color-gold-500 #c58c00 | ||||
| .pf-v5-c-button.pf-m-warning:focus | --pf-v5-c-button--m-warning--Color | #151515 | ||
--pf-v5-c-button--m-warning--Color --pf-v5-c-button--m-warning--focus--Color --pf-v5-global--Color--dark-100 $pf-v5-global--Color--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button.pf-m-warning:focus | --pf-v5-c-button--m-warning--BackgroundColor | #c58c00 | ||
--pf-v5-c-button--m-warning--BackgroundColor --pf-v5-c-button--m-warning--focus--BackgroundColor --pf-v5-global--palette--gold-500 $pf-v5-color-gold-500 #c58c00 | ||||
| .pf-v5-c-button.pf-m-warning:active | --pf-v5-c-button--m-warning--Color | #151515 | ||
--pf-v5-c-button--m-warning--Color --pf-v5-c-button--m-warning--active--Color --pf-v5-global--Color--dark-100 $pf-v5-global--Color--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button.pf-m-warning:active | --pf-v5-c-button--m-warning--BackgroundColor | #c58c00 | ||
--pf-v5-c-button--m-warning--BackgroundColor --pf-v5-c-button--m-warning--active--BackgroundColor --pf-v5-global--palette--gold-500 $pf-v5-color-gold-500 #c58c00 | ||||
| .pf-v5-c-button.pf-m-control | --pf-v5-c-button--BorderRadius | 0 | ||
--pf-v5-c-button--BorderRadius --pf-v5-c-button--m-control--BorderRadius 0 | ||||
| .pf-v5-c-button.pf-m-control | --pf-v5-c-button--disabled--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-button--disabled--BackgroundColor --pf-v5-c-button--m-control--disabled--BackgroundColor --pf-v5-global--disabled-color--300 $pf-v5-global--disabled-color--300 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-button.pf-m-control | --pf-v5-c-button--after--BorderWidth | 1px | ||
--pf-v5-c-button--after--BorderWidth --pf-v5-c-button--m-control--after--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-button.pf-m-control | --pf-v5-c-button--after--BorderColor | #f0f0f0 #f0f0f0 #8a8d90 #f0f0f0 | ||
--pf-v5-c-button--after--BorderColor --pf-v5-c-button--m-control--after--BorderTopColor --pf-v5-c-button--m-control--after--BorderRightColor --pf-v5-c-button--m-control--after--BorderBottomColor --pf-v5-c-button--m-control--after--BorderLeftColor --pf-v5-global--BorderColor--300 --pf-v5-global--BorderColor--300 --pf-v5-global--BorderColor--200 --pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--300 $pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--300 $pf-v5-color-black-200 $pf-v5-color-black-200 $pf-v5-color-black-500 $pf-v5-color-black-200 #f0f0f0 #f0f0f0 #8a8d90 #f0f0f0 | ||||
| .pf-v5-c-button.pf-m-control:hover | --pf-v5-c-button--m-control--Color | #151515 | ||
--pf-v5-c-button--m-control--Color --pf-v5-c-button--m-control--hover--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button.pf-m-control:hover | --pf-v5-c-button--m-control--BackgroundColor | #fff | ||
--pf-v5-c-button--m-control--BackgroundColor --pf-v5-c-button--m-control--hover--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-button.pf-m-control:hover | --pf-v5-c-button--m-control--after--BorderBottomColor | #06c | ||
--pf-v5-c-button--m-control--after--BorderBottomColor --pf-v5-c-button--m-control--hover--after--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-button.pf-m-control:active | --pf-v5-c-button--m-control--Color | #151515 | ||
--pf-v5-c-button--m-control--Color --pf-v5-c-button--m-control--active--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button.pf-m-control:active | --pf-v5-c-button--m-control--BackgroundColor | #fff | ||
--pf-v5-c-button--m-control--BackgroundColor --pf-v5-c-button--m-control--active--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-button.pf-m-control:active | --pf-v5-c-button--m-control--after--BorderBottomColor | #06c | ||
--pf-v5-c-button--m-control--after--BorderBottomColor --pf-v5-c-button--m-control--active--after--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-button.pf-m-control:focus | --pf-v5-c-button--m-control--Color | #151515 | ||
--pf-v5-c-button--m-control--Color --pf-v5-c-button--m-control--focus--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button.pf-m-control:focus | --pf-v5-c-button--m-control--BackgroundColor | #fff | ||
--pf-v5-c-button--m-control--BackgroundColor --pf-v5-c-button--m-control--focus--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-button.pf-m-control:focus | --pf-v5-c-button--m-control--after--BorderBottomColor | #06c | ||
--pf-v5-c-button--m-control--after--BorderBottomColor --pf-v5-c-button--m-control--focus--after--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-button.pf-m-control.pf-m-expanded | --pf-v5-c-button--m-control--Color | #151515 | ||
--pf-v5-c-button--m-control--Color --pf-v5-c-button--m-control--m-expanded--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button.pf-m-control.pf-m-expanded | --pf-v5-c-button--m-control--BackgroundColor | #fff | ||
--pf-v5-c-button--m-control--BackgroundColor --pf-v5-c-button--m-control--m-expanded--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-button.pf-m-control.pf-m-expanded | --pf-v5-c-button--m-control--after--BorderBottomColor | #06c | ||
--pf-v5-c-button--m-control--after--BorderBottomColor --pf-v5-c-button--m-control--m-expanded--after--BorderBottomColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-button.pf-m-plain | --pf-v5-c-button--disabled--Color | #d2d2d2 | ||
--pf-v5-c-button--disabled--Color --pf-v5-c-button--m-plain--disabled--Color --pf-v5-global--disabled-color--200 $pf-v5-global--disabled-color--200 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-button.pf-m-plain | --pf-v5-c-button--disabled--BackgroundColor | transparent | ||
--pf-v5-c-button--disabled--BackgroundColor --pf-v5-c-button--m-plain--disabled--BackgroundColor transparent | ||||
| .pf-v5-c-button.pf-m-plain:hover | --pf-v5-c-button--m-plain--Color | #151515 | ||
--pf-v5-c-button--m-plain--Color --pf-v5-c-button--m-plain--hover--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button.pf-m-plain:hover | --pf-v5-c-button--m-plain--BackgroundColor | transparent | ||
--pf-v5-c-button--m-plain--BackgroundColor --pf-v5-c-button--m-plain--hover--BackgroundColor transparent | ||||
| .pf-v5-c-button.pf-m-plain:active | --pf-v5-c-button--m-plain--Color | #151515 | ||
--pf-v5-c-button--m-plain--Color --pf-v5-c-button--m-plain--active--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button.pf-m-plain:active | --pf-v5-c-button--m-plain--BackgroundColor | transparent | ||
--pf-v5-c-button--m-plain--BackgroundColor --pf-v5-c-button--m-plain--active--BackgroundColor transparent | ||||
| .pf-v5-c-button.pf-m-plain:focus | --pf-v5-c-button--m-plain--Color | #151515 | ||
--pf-v5-c-button--m-plain--Color --pf-v5-c-button--m-plain--focus--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button.pf-m-plain:focus | --pf-v5-c-button--m-plain--BackgroundColor | transparent | ||
--pf-v5-c-button--m-plain--BackgroundColor --pf-v5-c-button--m-plain--focus--BackgroundColor transparent | ||||
| .pf-v5-c-button:disabled .pf-v5-c-badge | --pf-v5-c-badge--m-unread--Color | #151515 | ||
--pf-v5-c-badge--m-unread--Color --pf-v5-c-button--disabled__c-badge--Color --pf-v5-global--Color--dark-100 $pf-v5-global--Color--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-button:disabled .pf-v5-c-badge | --pf-v5-c-badge--m-unread--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-badge--m-unread--BackgroundColor --pf-v5-c-button--disabled__c-badge--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-button:disabled .pf-v5-c-badge | --pf-v5-c-button--m-primary__c-badge--BorderWidth | 0 | ||
| .pf-v5-c-button.pf-m-aria-disabled | --pf-v5-c-button--after--BorderWidth | 0 | ||
| .pf-v5-c-button.pf-m-aria-disabled | --pf-v5-c-button--m-link--m-inline--hover--TextDecoration | none | ||
| .pf-v5-c-button.pf-m-progress | --pf-v5-c-button--PaddingRight | calc(1rem + calc(1rem + 0.5rem) / 2) | ||
--pf-v5-c-button--PaddingRight --pf-v5-c-button--m-progress--PaddingRight calc(--pf-v5-global--spacer--md + --pf-v5-c-button__progress--width / 2) calc($pf-v5-global--spacer--md + calc(--pf-v5-global--icon--FontSize--md + --pf-v5-global--spacer--sm) / 2) calc($pf-v5-global--spacer--md + calc($pf-v5-global--icon--FontSize--md + $pf-v5-global--spacer--sm) / 2) calc(pf-size-prem(16px) + calc(pf-font-prem(16px) + pf-size-prem(8px)) / 2) calc(1rem + calc(1rem + 0.5rem) / 2) | ||||
| .pf-v5-c-button.pf-m-progress | --pf-v5-c-button--PaddingLeft | calc(1rem + calc(1rem + 0.5rem) / 2) | ||
--pf-v5-c-button--PaddingLeft --pf-v5-c-button--m-progress--PaddingLeft calc(--pf-v5-global--spacer--md + --pf-v5-c-button__progress--width / 2) calc($pf-v5-global--spacer--md + calc(--pf-v5-global--icon--FontSize--md + --pf-v5-global--spacer--sm) / 2) calc($pf-v5-global--spacer--md + calc($pf-v5-global--icon--FontSize--md + $pf-v5-global--spacer--sm) / 2) calc(pf-size-prem(16px) + calc(pf-font-prem(16px) + pf-size-prem(8px)) / 2) calc(1rem + calc(1rem + 0.5rem) / 2) | ||||
| .pf-v5-c-button.pf-m-in-progress | --pf-v5-c-button--m-link--m-inline--PaddingLeft | calc(0.25rem + 1rem + 0.5rem) | ||
--pf-v5-c-button--m-link--m-inline--PaddingLeft --pf-v5-c-button--m-link--m-inline--m-in-progress--PaddingLeft calc(--pf-v5-c-button--m-link--m-inline__progress--Left + 1rem + --pf-v5-global--spacer--sm) calc(--pf-v5-global--spacer--xs + 1rem + $pf-v5-global--spacer--sm) calc($pf-v5-global--spacer--xs + 1rem + $pf-v5-global--spacer--sm) calc(pf-size-prem(4px) + 1rem + pf-size-prem(8px)) calc(0.25rem + 1rem + 0.5rem) | ||||
| .pf-v5-c-button.pf-m-in-progress:not(.pf-m-plain) | --pf-v5-c-button--PaddingRight | 1rem | ||
--pf-v5-c-button--PaddingRight --pf-v5-c-button--m-in-progress--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-button.pf-m-in-progress:not(.pf-m-plain) | --pf-v5-c-button--PaddingLeft | calc(1rem + calc(1rem + 0.5rem)) | ||
--pf-v5-c-button--PaddingLeft --pf-v5-c-button--m-in-progress--PaddingLeft calc(--pf-v5-global--spacer--md + --pf-v5-c-button__progress--width) calc($pf-v5-global--spacer--md + calc(--pf-v5-global--icon--FontSize--md + --pf-v5-global--spacer--sm)) calc($pf-v5-global--spacer--md + calc($pf-v5-global--icon--FontSize--md + $pf-v5-global--spacer--sm)) calc(pf-size-prem(16px) + calc(pf-font-prem(16px) + pf-size-prem(8px))) calc(1rem + calc(1rem + 0.5rem)) | ||||
| .pf-v5-c-button.pf-m-in-progress.pf-m-plain | --pf-v5-c-button--m-plain--Color | #06c | ||
--pf-v5-c-button--m-plain--Color --pf-v5-c-button--m-in-progress--m-plain--Color --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-button.pf-m-in-progress.pf-m-plain | --pf-v5-c-button__progress--Left | 50% | ||
--pf-v5-c-button__progress--Left --pf-v5-c-button--m-in-progress--m-plain__progress--Left 50% | ||||
| .pf-v5-c-button.pf-m-in-progress.pf-m-plain | --pf-v5-c-button__progress--TranslateX | -50% | ||
--pf-v5-c-button__progress--TranslateX --pf-v5-c-button--m-in-progress--m-plain__progress--TranslateX -50% | ||||
| .pf-v5-c-button__progress .pf-v5-c-spinner | --pf-v5-c-spinner--Color | currentcolor | ||
View source on GitHub
