Button

Buttons communicate and trigger actions a user can take in an application or website. Related design guidelines: Buttons and links

Examples Props CSS Variables

Examples

Block level

Variations

Links as button

Link to Core Docs Secondary Link to Core Docs Tertiary Link to Core Docs Jump to modifiers in contribution guidelines

Props

Button properties
Name	Type	Required	Default	Description
children	React.ReactNode	No	null	Content rendered inside the button
className	string	No	''	Additional classes added to the button
component	React.ElementType<any>	No	'button'	Sets the base component to render. defaults to button
isActive	boolean	No	false	Adds active styling to button.
isBlock	boolean	No	false	Adds block styling to button
isDisabled	boolean	No	false	Disables the button and adds disabled styling
isInline	boolean	No	false	Adds inline styling to a link button
type	'button' \| 'submit' \| 'reset'	No	ButtonType.button	Sets button type
variant	'primary' \| 'secondary' \| 'tertiary' \| 'danger' \| 'link' \| 'plain' \| 'control'	No	ButtonVariant.primary	Adds button variant styles
iconPosition	'left' \| 'right'	No	'left'	Sets position of the link icon
aria-label	string	No	null	Adds accessible text to the button.
icon	React.ReactNode \| null	No	null	Icon for the button. Usable by all variants except for plain.
tabIndex	number	No	null	Set button tab index unless component is not a button and is disabled
ouiaId		No	null

CSS Variables


	.pf-c-button	--pf-c-button--PaddingTop	0.375rem
--pf-c-button--PaddingTop --pf-global--spacer--form-element $pf-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-c-button	--pf-c-button--PaddingRight	1rem
--pf-c-button--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-button	--pf-c-button--PaddingBottom	0.375rem
--pf-c-button--PaddingBottom --pf-global--spacer--form-element $pf-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-c-button	--pf-c-button--PaddingLeft	1rem
--pf-c-button--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-button	--pf-c-button--LineHeight	1.5
--pf-c-button--LineHeight --pf-global--LineHeight--md $pf-global--LineHeight--md 1.5
	.pf-c-button	--pf-c-button--FontWeight	500
--pf-c-button--FontWeight --pf-global--FontWeight--semi-bold $pf-global--FontWeight--semi-bold 500
	.pf-c-button	--pf-c-button--FontSize	1rem
--pf-c-button--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-button	--pf-c-button--BorderRadius	3px
--pf-c-button--BorderRadius --pf-global--BorderRadius--sm $pf-global--BorderRadius--sm 3px
	.pf-c-button	--pf-c-button--BorderColor	transparent
	.pf-c-button	--pf-c-button--BorderWidth	1px
--pf-c-button--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-button	--pf-c-button--hover--BorderWidth	2px
--pf-c-button--hover--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-button	--pf-c-button--focus--BorderWidth	2px
--pf-c-button--focus--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-button	--pf-c-button--active--BorderWidth	2px
--pf-c-button--active--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-button	--pf-c-button--disabled--Color	#6a6e73
--pf-c-button--disabled--Color --pf-global--disabled-color--100 $pf-global--disabled-color--100 $pf-color-black-600 #6a6e73
	.pf-c-button	--pf-c-button--disabled--BackgroundColor	#d2d2d2
--pf-c-button--disabled--BackgroundColor --pf-global--disabled-color--200 $pf-global--disabled-color--200 $pf-color-black-300 #d2d2d2
	.pf-c-button	--pf-c-button--disabled--BorderColor	transparent
	.pf-c-button	--pf-c-button--m-primary--BackgroundColor	#06c
--pf-c-button--m-primary--BackgroundColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-button	--pf-c-button--m-primary--Color	#fff
--pf-c-button--m-primary--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-button	--pf-c-button--m-primary--hover--BackgroundColor	#004080
--pf-c-button--m-primary--hover--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-button	--pf-c-button--m-primary--hover--Color	#fff
--pf-c-button--m-primary--hover--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-button	--pf-c-button--m-primary--focus--BackgroundColor	#004080
--pf-c-button--m-primary--focus--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-button	--pf-c-button--m-primary--focus--Color	#fff
--pf-c-button--m-primary--focus--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-button	--pf-c-button--m-primary--active--BackgroundColor	#004080
--pf-c-button--m-primary--active--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-button	--pf-c-button--m-primary--active--Color	#fff
--pf-c-button--m-primary--active--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-button	--pf-c-button--m-secondary--BackgroundColor	transparent
	.pf-c-button	--pf-c-button--m-secondary--BorderColor	#06c
--pf-c-button--m-secondary--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-button	--pf-c-button--m-secondary--Color	#06c
--pf-c-button--m-secondary--Color --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-button	--pf-c-button--m-secondary--hover--BackgroundColor	transparent
	.pf-c-button	--pf-c-button--m-secondary--hover--BorderColor	#06c
--pf-c-button--m-secondary--hover--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-button	--pf-c-button--m-secondary--hover--Color	#06c
--pf-c-button--m-secondary--hover--Color --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-button	--pf-c-button--m-secondary--focus--BackgroundColor	transparent
	.pf-c-button	--pf-c-button--m-secondary--focus--BorderColor	#06c
--pf-c-button--m-secondary--focus--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-button	--pf-c-button--m-secondary--focus--Color	#06c
--pf-c-button--m-secondary--focus--Color --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-button	--pf-c-button--m-secondary--active--BackgroundColor	transparent
	.pf-c-button	--pf-c-button--m-secondary--active--BorderColor	#06c
--pf-c-button--m-secondary--active--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-button	--pf-c-button--m-secondary--active--Color	#06c
--pf-c-button--m-secondary--active--Color --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-button	--pf-c-button--m-tertiary--BackgroundColor	transparent
	.pf-c-button	--pf-c-button--m-tertiary--BorderColor	#151515
--pf-c-button--m-tertiary--BorderColor --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-button	--pf-c-button--m-tertiary--Color	#151515
--pf-c-button--m-tertiary--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-button	--pf-c-button--m-tertiary--hover--BackgroundColor	transparent
	.pf-c-button	--pf-c-button--m-tertiary--hover--BorderColor	#151515
--pf-c-button--m-tertiary--hover--BorderColor --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-button	--pf-c-button--m-tertiary--hover--Color	#151515
--pf-c-button--m-tertiary--hover--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-button	--pf-c-button--m-tertiary--focus--BackgroundColor	transparent
	.pf-c-button	--pf-c-button--m-tertiary--focus--BorderColor	#151515
--pf-c-button--m-tertiary--focus--BorderColor --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-button	--pf-c-button--m-tertiary--focus--Color	#151515
--pf-c-button--m-tertiary--focus--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-button	--pf-c-button--m-tertiary--active--BackgroundColor	transparent
	.pf-c-button	--pf-c-button--m-tertiary--active--BorderColor	#151515
--pf-c-button--m-tertiary--active--BorderColor --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-button	--pf-c-button--m-tertiary--active--Color	#151515
--pf-c-button--m-tertiary--active--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-button	--pf-c-button--m-danger--BackgroundColor	#c9190b
--pf-c-button--m-danger--BackgroundColor --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-button	--pf-c-button--m-danger--Color	#fff
--pf-c-button--m-danger--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-button	--pf-c-button--m-danger--hover--BackgroundColor	#a30000
--pf-c-button--m-danger--hover--BackgroundColor --pf-global--danger-color--200 $pf-global--danger-color--200 $pf-color-red-200 #a30000
	.pf-c-button	--pf-c-button--m-danger--hover--Color	#fff
--pf-c-button--m-danger--hover--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-button	--pf-c-button--m-danger--focus--BackgroundColor	#a30000
--pf-c-button--m-danger--focus--BackgroundColor --pf-global--danger-color--200 $pf-global--danger-color--200 $pf-color-red-200 #a30000
	.pf-c-button	--pf-c-button--m-danger--focus--Color	#fff
--pf-c-button--m-danger--focus--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-button	--pf-c-button--m-danger--active--BackgroundColor	#a30000
--pf-c-button--m-danger--active--BackgroundColor --pf-global--danger-color--200 $pf-global--danger-color--200 $pf-color-red-200 #a30000
	.pf-c-button	--pf-c-button--m-danger--active--Color	#fff
--pf-c-button--m-danger--active--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-button	--pf-c-button--m-link--BackgroundColor	transparent
	.pf-c-button	--pf-c-button--m-link--Color	#06c
--pf-c-button--m-link--Color --pf-global--link--Color $pf-global--link--Color $pf-global--primary-color--100 $pf-color-blue-400 #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--m-link--hover--Color --pf-global--link--Color--hover $pf-global--link--Color--hover $pf-global--primary-color--200 $pf-color-blue-500 #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--m-link--focus--Color --pf-global--link--Color--hover $pf-global--link--Color--hover $pf-global--primary-color--200 $pf-color-blue-500 #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--m-link--active--Color --pf-global--link--Color--hover $pf-global--link--Color--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-button	--pf-c-button--m-link--disabled--BackgroundColor	transparent
	.pf-c-button	--pf-c-button--m-link--m-inline--hover--TextDecoration	underline
--pf-c-button--m-link--m-inline--hover--TextDecoration --pf-global--link--TextDecoration--hover $pf-global--link--TextDecoration--hover underline
	.pf-c-button	--pf-c-button--m-link--m-inline--hover--Color	#004080
--pf-c-button--m-link--m-inline--hover--Color --pf-global--link--Color--hover $pf-global--link--Color--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-button	--pf-c-button--m-plain--BackgroundColor	transparent
	.pf-c-button	--pf-c-button--m-plain--Color	#6a6e73
--pf-c-button--m-plain--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #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--m-plain--hover--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #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--m-plain--focus--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #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--m-plain--active--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-button	--pf-c-button--m-plain--disabled--Color	#d2d2d2
--pf-c-button--m-plain--disabled--Color --pf-global--disabled-color--200 $pf-global--disabled-color--200 $pf-color-black-300 #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--m-control--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-button	--pf-c-button--m-control--Color	#151515
--pf-c-button--m-control--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-button	--pf-c-button--m-control--after--BorderWidth	1px
--pf-c-button--m-control--after--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-button	--pf-c-button--m-control--after--BorderTopColor	#f0f0f0
--pf-c-button--m-control--after--BorderTopColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-button	--pf-c-button--m-control--after--BorderRightColor	#f0f0f0
--pf-c-button--m-control--after--BorderRightColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-button	--pf-c-button--m-control--after--BorderBottomColor	#8a8d90
--pf-c-button--m-control--after--BorderBottomColor --pf-global--BorderColor--200 $pf-global--BorderColor--200 $pf-color-black-500 #8a8d90
	.pf-c-button	--pf-c-button--m-control--after--BorderLeftColor	#f0f0f0
--pf-c-button--m-control--after--BorderLeftColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-button	--pf-c-button--m-control--hover--BackgroundColor	#fff
--pf-c-button--m-control--hover--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-button	--pf-c-button--m-control--hover--Color	#151515
--pf-c-button--m-control--hover--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-button	--pf-c-button--m-control--hover--after--BorderBottomWidth	2px
--pf-c-button--m-control--hover--after--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-button	--pf-c-button--m-control--hover--after--BorderBottomColor	#06c
--pf-c-button--m-control--hover--after--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-button	--pf-c-button--m-control--active--BackgroundColor	#fff
--pf-c-button--m-control--active--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-button	--pf-c-button--m-control--active--Color	#151515
--pf-c-button--m-control--active--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-button	--pf-c-button--m-control--active--after--BorderBottomWidth	2px
--pf-c-button--m-control--active--after--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-button	--pf-c-button--m-control--active--after--BorderBottomColor	#06c
--pf-c-button--m-control--active--after--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-button	--pf-c-button--m-control--focus--BackgroundColor	#fff
--pf-c-button--m-control--focus--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-button	--pf-c-button--m-control--focus--Color	#151515
--pf-c-button--m-control--focus--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-button	--pf-c-button--m-control--focus--after--BorderBottomWidth	2px
--pf-c-button--m-control--focus--after--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-button	--pf-c-button--m-control--focus--after--BorderBottomColor	#06c
--pf-c-button--m-control--focus--after--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-button	--pf-c-button--m-control--m-expanded--BackgroundColor	#fff
--pf-c-button--m-control--m-expanded--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-button	--pf-c-button--m-control--m-expanded--Color	#151515
--pf-c-button--m-control--m-expanded--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-button	--pf-c-button--m-control--m-expanded--after--BorderBottomWidth	2px
--pf-c-button--m-control--m-expanded--after--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-button	--pf-c-button--m-control--m-expanded--after--BorderBottomColor	#06c
--pf-c-button--m-control--m-expanded--after--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-button	--pf-c-button--m-control--disabled--after--BorderTopColor	transparent
	.pf-c-button	--pf-c-button--m-control--disabled--after--BorderRightColor	transparent
	.pf-c-button	--pf-c-button--m-control--disabled--after--BorderBottomColor	transparent
	.pf-c-button	--pf-c-button--m-control--disabled--after--BorderLeftColor	transparent
	.pf-c-button	--pf-c-button--m-control--disabled--BackgroundColor	transparent
	.pf-c-button	--pf-c-button__icon--m-start--MarginRight	0.25rem
--pf-c-button__icon--m-start--MarginRight --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-button	--pf-c-button__icon--m-end--MarginLeft	0.25rem
--pf-c-button__icon--m-end--MarginLeft --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-button:hover::after	--pf-c-button--BorderWidth	2px
--pf-c-button--BorderWidth --pf-c-button--hover--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-button:focus::after	--pf-c-button--BorderWidth	2px
--pf-c-button--BorderWidth --pf-c-button--focus--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-button:active::after	--pf-c-button--BorderWidth	2px
--pf-c-button--BorderWidth --pf-c-button--active--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-button.pf-m-primary:hover	--pf-c-button--m-primary--Color	#fff
--pf-c-button--m-primary--Color --pf-c-button--m-primary--hover--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-button.pf-m-primary:hover	--pf-c-button--m-primary--BackgroundColor	#004080
--pf-c-button--m-primary--BackgroundColor --pf-c-button--m-primary--hover--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-button.pf-m-primary:focus	--pf-c-button--m-primary--Color	#fff
--pf-c-button--m-primary--Color --pf-c-button--m-primary--focus--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-button.pf-m-primary:focus	--pf-c-button--m-primary--BackgroundColor	#004080
--pf-c-button--m-primary--BackgroundColor --pf-c-button--m-primary--focus--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-button.pf-m-primary:active	--pf-c-button--m-primary--Color	#fff
--pf-c-button--m-primary--Color --pf-c-button--m-primary--active--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-button.pf-m-primary:active	--pf-c-button--m-primary--BackgroundColor	#004080
--pf-c-button--m-primary--BackgroundColor --pf-c-button--m-primary--active--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-button.pf-m-secondary::after	--pf-c-button--BorderColor	#06c
--pf-c-button--BorderColor --pf-c-button--m-secondary--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-button.pf-m-secondary:hover	--pf-c-button--m-secondary--Color	#06c
--pf-c-button--m-secondary--Color --pf-c-button--m-secondary--hover--Color --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-button.pf-m-secondary:hover	--pf-c-button--m-secondary--BackgroundColor	transparent
--pf-c-button--m-secondary--BackgroundColor --pf-c-button--m-secondary--hover--BackgroundColor transparent
	.pf-c-button.pf-m-secondary:hover::after	--pf-c-button--BorderColor	#06c
--pf-c-button--BorderColor --pf-c-button--m-secondary--hover--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-button.pf-m-secondary:focus	--pf-c-button--m-secondary--Color	#06c
--pf-c-button--m-secondary--Color --pf-c-button--m-secondary--focus--Color --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-button.pf-m-secondary:focus	--pf-c-button--m-secondary--BackgroundColor	transparent
--pf-c-button--m-secondary--BackgroundColor --pf-c-button--m-secondary--focus--BackgroundColor transparent
	.pf-c-button.pf-m-secondary:focus::after	--pf-c-button--BorderColor	#06c
--pf-c-button--BorderColor --pf-c-button--m-secondary--focus--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-button.pf-m-secondary.pf-m-active	--pf-c-button--m-secondary--Color	#06c
--pf-c-button--m-secondary--Color --pf-c-button--m-secondary--active--Color --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-button.pf-m-secondary.pf-m-active	--pf-c-button--m-secondary--BackgroundColor	transparent
--pf-c-button--m-secondary--BackgroundColor --pf-c-button--m-secondary--active--BackgroundColor transparent
	.pf-c-button.pf-m-secondary.pf-m-active::after	--pf-c-button--BorderColor	#06c
--pf-c-button--BorderColor --pf-c-button--m-secondary--active--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-button.pf-m-tertiary::after	--pf-c-button--BorderColor	#151515
--pf-c-button--BorderColor --pf-c-button--m-tertiary--BorderColor --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-button.pf-m-tertiary:hover	--pf-c-button--m-tertiary--Color	#151515
--pf-c-button--m-tertiary--Color --pf-c-button--m-tertiary--hover--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-button.pf-m-tertiary:hover	--pf-c-button--m-tertiary--BackgroundColor	transparent
--pf-c-button--m-tertiary--BackgroundColor --pf-c-button--m-tertiary--hover--BackgroundColor transparent
	.pf-c-button.pf-m-tertiary:hover::after	--pf-c-button--BorderColor	#151515
--pf-c-button--BorderColor --pf-c-button--m-tertiary--hover--BorderColor --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-button.pf-m-tertiary:focus	--pf-c-button--m-tertiary--Color	#151515
--pf-c-button--m-tertiary--Color --pf-c-button--m-tertiary--focus--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-button.pf-m-tertiary:focus	--pf-c-button--m-tertiary--BackgroundColor	transparent
--pf-c-button--m-tertiary--BackgroundColor --pf-c-button--m-tertiary--focus--BackgroundColor transparent
	.pf-c-button.pf-m-tertiary:focus::after	--pf-c-button--BorderColor	#151515
--pf-c-button--BorderColor --pf-c-button--m-tertiary--focus--BorderColor --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-button.pf-m-tertiary:active	--pf-c-button--m-tertiary--Color	#151515
--pf-c-button--m-tertiary--Color --pf-c-button--m-tertiary--active--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-button.pf-m-tertiary:active	--pf-c-button--m-tertiary--BackgroundColor	transparent
--pf-c-button--m-tertiary--BackgroundColor --pf-c-button--m-tertiary--active--BackgroundColor transparent
	.pf-c-button.pf-m-tertiary:active::after	--pf-c-button--BorderColor	#151515
--pf-c-button--BorderColor --pf-c-button--m-tertiary--active--BorderColor --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-button.pf-m-danger:hover	--pf-c-button--m-danger--Color	#fff
--pf-c-button--m-danger--Color --pf-c-button--m-danger--hover--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-button.pf-m-danger:hover	--pf-c-button--m-danger--BackgroundColor	#a30000
--pf-c-button--m-danger--BackgroundColor --pf-c-button--m-danger--hover--BackgroundColor --pf-global--danger-color--200 $pf-global--danger-color--200 $pf-color-red-200 #a30000
	.pf-c-button.pf-m-danger:focus	--pf-c-button--m-danger--Color	#fff
--pf-c-button--m-danger--Color --pf-c-button--m-danger--focus--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-button.pf-m-danger:focus	--pf-c-button--m-danger--BackgroundColor	#a30000
--pf-c-button--m-danger--BackgroundColor --pf-c-button--m-danger--focus--BackgroundColor --pf-global--danger-color--200 $pf-global--danger-color--200 $pf-color-red-200 #a30000
	.pf-c-button.pf-m-danger:active	--pf-c-button--m-danger--Color	#fff
--pf-c-button--m-danger--Color --pf-c-button--m-danger--active--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-button.pf-m-danger:active	--pf-c-button--m-danger--BackgroundColor	#a30000
--pf-c-button--m-danger--BackgroundColor --pf-c-button--m-danger--active--BackgroundColor --pf-global--danger-color--200 $pf-global--danger-color--200 $pf-color-red-200 #a30000
	.pf-c-button.pf-m-link	--pf-c-button--disabled--BackgroundColor	transparent
--pf-c-button--disabled--BackgroundColor --pf-c-button--m-link--disabled--BackgroundColor transparent
	.pf-c-button.pf-m-link:not(.pf-m-inline):hover	--pf-c-button--m-link--Color	#004080
--pf-c-button--m-link--Color --pf-c-button--m-link--hover--Color --pf-global--link--Color--hover $pf-global--link--Color--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-button.pf-m-link:not(.pf-m-inline):hover	--pf-c-button--m-link--BackgroundColor	transparent
--pf-c-button--m-link--BackgroundColor --pf-c-button--m-link--hover--BackgroundColor transparent
	.pf-c-button.pf-m-link:not(.pf-m-inline):focus	--pf-c-button--m-link--Color	#004080
--pf-c-button--m-link--Color --pf-c-button--m-link--focus--Color --pf-global--link--Color--hover $pf-global--link--Color--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-button.pf-m-link:not(.pf-m-inline):focus	--pf-c-button--m-link--BackgroundColor	transparent
--pf-c-button--m-link--BackgroundColor --pf-c-button--m-link--focus--BackgroundColor transparent
	.pf-c-button.pf-m-link:not(.pf-m-inline):active	--pf-c-button--m-link--Color	#004080
--pf-c-button--m-link--Color --pf-c-button--m-link--active--Color --pf-global--link--Color--hover $pf-global--link--Color--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-button.pf-m-link:not(.pf-m-inline):active	--pf-c-button--m-link--BackgroundColor	transparent
--pf-c-button--m-link--BackgroundColor --pf-c-button--m-link--active--BackgroundColor transparent
	.pf-c-button.pf-m-link.pf-m-inline:hover	--pf-c-button--m-link--Color	#004080
--pf-c-button--m-link--Color --pf-c-button--m-link--m-inline--hover--Color --pf-global--link--Color--hover $pf-global--link--Color--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-button.pf-m-control	--pf-c-button--disabled--BackgroundColor	transparent
--pf-c-button--disabled--BackgroundColor --pf-c-button--m-control--disabled--BackgroundColor transparent
	.pf-c-button.pf-m-control::after	--pf-c-button--BorderWidth	1px
--pf-c-button--BorderWidth --pf-c-button--m-control--after--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-button.pf-m-control::after	--pf-c-button--BorderColor	#f0f0f0 #f0f0f0 #8a8d90 #f0f0f0
--pf-c-button--BorderColor --pf-c-button--m-control--after--BorderTopColor --pf-c-button--m-control--after--BorderRightColor --pf-c-button--m-control--after--BorderBottomColor --pf-c-button--m-control--after--BorderLeftColor --pf-global--BorderColor--300 --pf-global--BorderColor--300 --pf-global--BorderColor--200 --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-global--BorderColor--200 $pf-global--BorderColor--300 $pf-color-black-200 $pf-color-black-200 $pf-color-black-500 $pf-color-black-200 #f0f0f0 #f0f0f0 #8a8d90 #f0f0f0
	.pf-c-button.pf-m-control:hover	--pf-c-button--m-control--Color	#151515
--pf-c-button--m-control--Color --pf-c-button--m-control--hover--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-button.pf-m-control:hover	--pf-c-button--m-control--BackgroundColor	#fff
--pf-c-button--m-control--BackgroundColor --pf-c-button--m-control--hover--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-button.pf-m-control:hover::after	--pf-c-button--m-control--after--BorderBottomColor	#06c
--pf-c-button--m-control--after--BorderBottomColor --pf-c-button--m-control--hover--after--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-button.pf-m-control:active	--pf-c-button--m-control--Color	#151515
--pf-c-button--m-control--Color --pf-c-button--m-control--active--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-button.pf-m-control:active	--pf-c-button--m-control--BackgroundColor	#fff
--pf-c-button--m-control--BackgroundColor --pf-c-button--m-control--active--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-button.pf-m-control:active::after	--pf-c-button--m-control--after--BorderBottomColor	#06c
--pf-c-button--m-control--after--BorderBottomColor --pf-c-button--m-control--active--after--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-button.pf-m-control:focus	--pf-c-button--m-control--Color	#151515
--pf-c-button--m-control--Color --pf-c-button--m-control--focus--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-button.pf-m-control:focus	--pf-c-button--m-control--BackgroundColor	#fff
--pf-c-button--m-control--BackgroundColor --pf-c-button--m-control--focus--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-button.pf-m-control:focus::after	--pf-c-button--m-control--after--BorderBottomColor	#06c
--pf-c-button--m-control--after--BorderBottomColor --pf-c-button--m-control--focus--after--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-button.pf-m-control.pf-m-expanded	--pf-c-button--m-control--Color	#151515
--pf-c-button--m-control--Color --pf-c-button--m-control--m-expanded--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-button.pf-m-control.pf-m-expanded	--pf-c-button--m-control--BackgroundColor	#fff
--pf-c-button--m-control--BackgroundColor --pf-c-button--m-control--m-expanded--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-button.pf-m-control.pf-m-expanded::after	--pf-c-button--m-control--after--BorderBottomColor	#06c
--pf-c-button--m-control--after--BorderBottomColor --pf-c-button--m-control--m-expanded--after--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-button.pf-m-control:disabled::after	--pf-c-button--m-control--after--BorderTopColor	transparent
--pf-c-button--m-control--after--BorderTopColor --pf-c-button--m-control--disabled--after--BorderTopColor transparent
	.pf-c-button.pf-m-control:disabled::after	--pf-c-button--m-control--after--BorderRightColor	transparent
--pf-c-button--m-control--after--BorderRightColor --pf-c-button--m-control--disabled--after--BorderRightColor transparent
	.pf-c-button.pf-m-control:disabled::after	--pf-c-button--m-control--after--BorderBottomColor	transparent
--pf-c-button--m-control--after--BorderBottomColor --pf-c-button--m-control--disabled--after--BorderBottomColor transparent
	.pf-c-button.pf-m-control:disabled::after	--pf-c-button--m-control--after--BorderLeftColor	transparent
--pf-c-button--m-control--after--BorderLeftColor --pf-c-button--m-control--disabled--after--BorderLeftColor transparent
	.pf-c-button.pf-m-plain	--pf-c-button--disabled--Color	#d2d2d2
--pf-c-button--disabled--Color --pf-c-button--m-plain--disabled--Color --pf-global--disabled-color--200 $pf-global--disabled-color--200 $pf-color-black-300 #d2d2d2
	.pf-c-button.pf-m-plain	--pf-c-button--disabled--BackgroundColor	transparent
--pf-c-button--disabled--BackgroundColor --pf-c-button--m-plain--disabled--BackgroundColor transparent
	.pf-c-button.pf-m-plain:hover	--pf-c-button--m-plain--Color	#151515
--pf-c-button--m-plain--Color --pf-c-button--m-plain--hover--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-button.pf-m-plain:hover	--pf-c-button--m-plain--BackgroundColor	transparent
--pf-c-button--m-plain--BackgroundColor --pf-c-button--m-plain--hover--BackgroundColor transparent
	.pf-c-button.pf-m-plain:active	--pf-c-button--m-plain--Color	#151515
--pf-c-button--m-plain--Color --pf-c-button--m-plain--active--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-button.pf-m-plain:active	--pf-c-button--m-plain--BackgroundColor	transparent
--pf-c-button--m-plain--BackgroundColor --pf-c-button--m-plain--active--BackgroundColor transparent
	.pf-c-button.pf-m-plain:focus	--pf-c-button--m-plain--Color	#151515
--pf-c-button--m-plain--Color --pf-c-button--m-plain--focus--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-button.pf-m-plain:focus	--pf-c-button--m-plain--BackgroundColor	transparent
--pf-c-button--m-plain--BackgroundColor --pf-c-button--m-plain--focus--BackgroundColor transparent
	.pf-c-button:disabled::after	--pf-c-button--BorderColor	transparent
--pf-c-button--BorderColor --pf-c-button--disabled--BorderColor transparent
	.pf-m-redhat-font .pf-c-button	--pf-c-button--FontWeight	400
--pf-c-button--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400