Patternfly Logo

Examples

Variations







Disabled



Aria disabled



Aria disabled button with tooltip

Block level

Types

Small



Call to action



Progress



Props

Button properties
NameTypeRequiredDefaultDescription
aria-labelstringNonullAdds accessible text to the button.
childrenReact.ReactNodeNonullContent rendered inside the button
classNamestringNo''Additional classes added to the button
componentReact.ElementType<any>No'button'Sets the base component to render. defaults to button
iconReact.ReactNode | nullNonullIcon for the button. Usable by all variants except for plain.
iconPosition'left' | 'right'No'left'Sets position of the link icon
inoperableEventsBetastring[]No['onClick', 'onKeyPress']Events to prevent when the button is in an aria-disabled state
isActivebooleanNofalseAdds active styling to button.
isAriaDisabledBetabooleanNofalseAdds disabled styling and communicates that the button is disabled using the aria-disabled html attribute
isBlockbooleanNofalseAdds block styling to button
isDisabledbooleanNofalseAdds disabled styling and disables the button using the disabled html attribute
isInlinebooleanNofalseAdds inline styling to a link button
isLargebooleanNofalseAdds large styling to the button
isLoadingbooleanNonullAdds progress styling to button
isSmallbooleanNofalseAdds small styling to the button
ouiaSafeNo type infoNotrue
spinnerAriaValueTextstringNoAria-valuetext for the loading spinner
tabIndexnumberNonullSets the button tabindex.
type'button' | 'submit' | 'reset'NoButtonType.buttonSets button type
variant'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control'NoButtonVariant.primaryAdds button variant styles

CSS variables

.pf-c-button--pf-c-button--PaddingTop
0.375rem
.pf-c-button--pf-c-button--PaddingRight
1rem
.pf-c-button--pf-c-button--PaddingBottom
0.375rem
.pf-c-button--pf-c-button--PaddingLeft
1rem
.pf-c-button--pf-c-button--LineHeight
1.5
.pf-c-button--pf-c-button--FontWeight
400
.pf-c-button--pf-c-button--FontSize
1rem
.pf-c-button--pf-c-button--BorderRadius
3px
.pf-c-button--pf-c-button--after--BorderRadius
3px
.pf-c-button--pf-c-button--after--BorderColor
transparent
.pf-c-button--pf-c-button--after--BorderWidth
1px
.pf-c-button--pf-c-button--hover--after--BorderWidth
2px
.pf-c-button--pf-c-button--focus--after--BorderWidth
2px
.pf-c-button--pf-c-button--active--after--BorderWidth
2px
.pf-c-button--pf-c-button--disabled--Color
#6a6e73
.pf-c-button--pf-c-button--disabled--BackgroundColor
#d2d2d2
.pf-c-button--pf-c-button--disabled--after--BorderColor
transparent
.pf-c-button--pf-c-button--m-primary--BackgroundColor
#06c
.pf-c-button--pf-c-button--m-primary--Color
#fff
.pf-c-button--pf-c-button--m-primary--hover--BackgroundColor
#004080
.pf-c-button--pf-c-button--m-primary--hover--Color
#fff
.pf-c-button--pf-c-button--m-primary--focus--BackgroundColor
#004080
.pf-c-button--pf-c-button--m-primary--focus--Color
#fff
.pf-c-button--pf-c-button--m-primary--active--BackgroundColor
#004080
.pf-c-button--pf-c-button--m-primary--active--Color
#fff
.pf-c-button--pf-c-button--m-secondary--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-secondary--after--BorderColor
#06c
.pf-c-button--pf-c-button--m-secondary--Color
#06c
.pf-c-button--pf-c-button--m-secondary--hover--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-secondary--hover--after--BorderColor
#06c
.pf-c-button--pf-c-button--m-secondary--hover--Color
#06c
.pf-c-button--pf-c-button--m-secondary--focus--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-secondary--focus--after--BorderColor
#06c
.pf-c-button--pf-c-button--m-secondary--focus--Color
#06c
.pf-c-button--pf-c-button--m-secondary--active--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-secondary--active--after--BorderColor
#06c
.pf-c-button--pf-c-button--m-secondary--active--Color
#06c
.pf-c-button--pf-c-button--m-tertiary--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-tertiary--after--BorderColor
#151515
.pf-c-button--pf-c-button--m-tertiary--Color
#151515
.pf-c-button--pf-c-button--m-tertiary--hover--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-tertiary--hover--after--BorderColor
#151515
.pf-c-button--pf-c-button--m-tertiary--hover--Color
#151515
.pf-c-button--pf-c-button--m-tertiary--focus--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-tertiary--focus--after--BorderColor
#151515
.pf-c-button--pf-c-button--m-tertiary--focus--Color
#151515
.pf-c-button--pf-c-button--m-tertiary--active--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-tertiary--active--after--BorderColor
#151515
.pf-c-button--pf-c-button--m-tertiary--active--Color
#151515
.pf-c-button--pf-c-button--m-warning--BackgroundColor
#f0ab00
.pf-c-button--pf-c-button--m-warning--Color
#151515
.pf-c-button--pf-c-button--m-warning--hover--BackgroundColor
#c58c00
.pf-c-button--pf-c-button--m-warning--hover--Color
#151515
.pf-c-button--pf-c-button--m-warning--focus--BackgroundColor
#c58c00
.pf-c-button--pf-c-button--m-warning--focus--Color
#151515
.pf-c-button--pf-c-button--m-warning--active--BackgroundColor
#c58c00
.pf-c-button--pf-c-button--m-warning--active--Color
#151515
.pf-c-button--pf-c-button--m-danger--BackgroundColor
#c9190b
.pf-c-button--pf-c-button--m-danger--Color
#fff
.pf-c-button--pf-c-button--m-danger--hover--BackgroundColor
#a30000
.pf-c-button--pf-c-button--m-danger--hover--Color
#fff
.pf-c-button--pf-c-button--m-danger--focus--BackgroundColor
#a30000
.pf-c-button--pf-c-button--m-danger--focus--Color
#fff
.pf-c-button--pf-c-button--m-danger--active--BackgroundColor
#a30000
.pf-c-button--pf-c-button--m-danger--active--Color
#fff
.pf-c-button--pf-c-button--m-link--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-link--Color
#06c
.pf-c-button--pf-c-button--m-link--hover--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-link--hover--Color
#004080
.pf-c-button--pf-c-button--m-link--focus--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-link--focus--Color
#004080
.pf-c-button--pf-c-button--m-link--active--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-link--active--Color
#004080
.pf-c-button--pf-c-button--m-link--disabled--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-link--m-inline--FontSize
inherit
.pf-c-button--pf-c-button--m-link--m-inline--hover--TextDecoration
underline
.pf-c-button--pf-c-button--m-link--m-inline--hover--Color
#004080
.pf-c-button--pf-c-button--m-plain--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-plain--Color
#6a6e73
.pf-c-button--pf-c-button--m-plain--hover--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-plain--hover--Color
#151515
.pf-c-button--pf-c-button--m-plain--focus--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-plain--focus--Color
#151515
.pf-c-button--pf-c-button--m-plain--active--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-plain--active--Color
#151515
.pf-c-button--pf-c-button--m-plain--disabled--Color
#d2d2d2
.pf-c-button--pf-c-button--m-plain--disabled--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-control--BackgroundColor
#fff
.pf-c-button--pf-c-button--m-control--Color
#151515
.pf-c-button--pf-c-button--m-control--BorderRadius
0
.pf-c-button--pf-c-button--m-control--after--BorderWidth
1px
.pf-c-button--pf-c-button--m-control--after--BorderTopColor
#f0f0f0
.pf-c-button--pf-c-button--m-control--after--BorderRightColor
#f0f0f0
.pf-c-button--pf-c-button--m-control--after--BorderBottomColor
#8a8d90
.pf-c-button--pf-c-button--m-control--after--BorderLeftColor
#f0f0f0
.pf-c-button--pf-c-button--m-control--disabled--BackgroundColor
#f0f0f0
.pf-c-button--pf-c-button--m-control--hover--BackgroundColor
#fff
.pf-c-button--pf-c-button--m-control--hover--Color
#151515
.pf-c-button--pf-c-button--m-control--hover--after--BorderBottomWidth
2px
.pf-c-button--pf-c-button--m-control--hover--after--BorderBottomColor
#06c
.pf-c-button--pf-c-button--m-control--active--BackgroundColor
#fff
.pf-c-button--pf-c-button--m-control--active--Color
#151515
.pf-c-button--pf-c-button--m-control--active--after--BorderBottomWidth
2px
.pf-c-button--pf-c-button--m-control--active--after--BorderBottomColor
#06c
.pf-c-button--pf-c-button--m-control--focus--BackgroundColor
#fff
.pf-c-button--pf-c-button--m-control--focus--Color
#151515
.pf-c-button--pf-c-button--m-control--focus--after--BorderBottomWidth
2px
.pf-c-button--pf-c-button--m-control--focus--after--BorderBottomColor
#06c
.pf-c-button--pf-c-button--m-control--m-expanded--BackgroundColor
#fff
.pf-c-button--pf-c-button--m-control--m-expanded--Color
#151515
.pf-c-button--pf-c-button--m-control--m-expanded--after--BorderBottomWidth
2px
.pf-c-button--pf-c-button--m-control--m-expanded--after--BorderBottomColor
#06c
.pf-c-button--pf-c-button--m-small--FontSize
0.875rem
.pf-c-button--pf-c-button--m-display-lg--PaddingTop
1rem
.pf-c-button--pf-c-button--m-display-lg--PaddingRight
2rem
.pf-c-button--pf-c-button--m-display-lg--PaddingBottom
1rem
.pf-c-button--pf-c-button--m-display-lg--PaddingLeft
2rem
.pf-c-button--pf-c-button--m-display-lg--FontWeight
700
.pf-c-button--pf-c-button--m-link--m-display-lg--FontSize
1.125rem
.pf-c-button--pf-c-button__icon--m-start--MarginRight
0.25rem
.pf-c-button--pf-c-button__icon--m-end--MarginLeft
0.25rem
.pf-c-button--pf-c-button__progress--width
calc(1.125rem + 0.5rem)
.pf-c-button--pf-c-button__progress--Opacity
0
.pf-c-button--pf-c-button__progress--TranslateY
-50%
.pf-c-button--pf-c-button__progress--Top
50%
.pf-c-button--pf-c-button__progress--Left
1rem
.pf-c-button--pf-c-button--m-progress--TransitionProperty
padding
.pf-c-button--pf-c-button--m-progress--TransitionDuration
250ms
.pf-c-button--pf-c-button--m-progress--PaddingRight
calc(1rem + calc(1.125rem + 0.5rem) / 2)
.pf-c-button--pf-c-button--m-progress--PaddingLeft
calc(1rem + calc(1.125rem + 0.5rem) / 2)
.pf-c-button--pf-c-button--m-in-progress--PaddingRight
1rem
.pf-c-button--pf-c-button--m-in-progress--PaddingLeft
calc(1rem + calc(1.125rem + 0.5rem))
.pf-c-button:hover--pf-c-button--after--BorderWidth
2px
.pf-c-button:focus--pf-c-button--after--BorderWidth
2px
.pf-c-button:active--pf-c-button--after--BorderWidth
2px
.pf-c-button.pf-m-small--pf-c-button--FontSize
0.875rem
.pf-c-button.pf-m-primary.pf-m-display-lg--pf-c-button--PaddingTop
1rem
.pf-c-button.pf-m-primary.pf-m-display-lg--pf-c-button--PaddingRight
2rem
.pf-c-button.pf-m-primary.pf-m-display-lg--pf-c-button--PaddingBottom
1rem
.pf-c-button.pf-m-primary.pf-m-display-lg--pf-c-button--PaddingLeft
2rem
.pf-c-button.pf-m-primary.pf-m-display-lg--pf-c-button--FontWeight
700
.pf-c-button.pf-m-primary:hover--pf-c-button--m-primary--Color
#fff
.pf-c-button.pf-m-primary:hover--pf-c-button--m-primary--BackgroundColor
#004080
.pf-c-button.pf-m-primary:focus--pf-c-button--m-primary--Color
#fff
.pf-c-button.pf-m-primary:focus--pf-c-button--m-primary--BackgroundColor
#004080
.pf-c-button.pf-m-primary:active--pf-c-button--m-primary--Color
#fff
.pf-c-button.pf-m-primary:active--pf-c-button--m-primary--BackgroundColor
#004080
.pf-c-button.pf-m-secondary--pf-c-button--after--BorderColor
#06c
.pf-c-button.pf-m-secondary:hover--pf-c-button--m-secondary--Color
#06c
.pf-c-button.pf-m-secondary:hover--pf-c-button--m-secondary--BackgroundColor
transparent
.pf-c-button.pf-m-secondary:hover--pf-c-button--after--BorderColor
#06c
.pf-c-button.pf-m-secondary:focus--pf-c-button--m-secondary--Color
#06c
.pf-c-button.pf-m-secondary:focus--pf-c-button--m-secondary--BackgroundColor
transparent
.pf-c-button.pf-m-secondary:focus--pf-c-button--after--BorderColor
#06c
.pf-c-button.pf-m-secondary.pf-m-active--pf-c-button--m-secondary--Color
#06c
.pf-c-button.pf-m-secondary.pf-m-active--pf-c-button--m-secondary--BackgroundColor
transparent
.pf-c-button.pf-m-secondary.pf-m-active--pf-c-button--after--BorderColor
#06c
.pf-c-button.pf-m-tertiary--pf-c-button--after--BorderColor
#151515
.pf-c-button.pf-m-tertiary:hover--pf-c-button--m-tertiary--Color
#151515
.pf-c-button.pf-m-tertiary:hover--pf-c-button--m-tertiary--BackgroundColor
transparent
.pf-c-button.pf-m-tertiary:hover--pf-c-button--after--BorderColor
#151515
.pf-c-button.pf-m-tertiary:focus--pf-c-button--m-tertiary--Color
#151515
.pf-c-button.pf-m-tertiary:focus--pf-c-button--m-tertiary--BackgroundColor
transparent
.pf-c-button.pf-m-tertiary:focus--pf-c-button--after--BorderColor
#151515
.pf-c-button.pf-m-tertiary:active--pf-c-button--m-tertiary--Color
#151515
.pf-c-button.pf-m-tertiary:active--pf-c-button--m-tertiary--BackgroundColor
transparent
.pf-c-button.pf-m-tertiary:active--pf-c-button--after--BorderColor
#151515
.pf-c-button.pf-m-danger:hover--pf-c-button--m-danger--Color
#fff
.pf-c-button.pf-m-danger:hover--pf-c-button--m-danger--BackgroundColor
#a30000
.pf-c-button.pf-m-danger:focus--pf-c-button--m-danger--Color
#fff
.pf-c-button.pf-m-danger:focus--pf-c-button--m-danger--BackgroundColor
#a30000
.pf-c-button.pf-m-danger:active--pf-c-button--m-danger--Color
#fff
.pf-c-button.pf-m-danger:active--pf-c-button--m-danger--BackgroundColor
#a30000
.pf-c-button.pf-m-warning:hover--pf-c-button--m-warning--Color
#151515
.pf-c-button.pf-m-warning:hover--pf-c-button--m-warning--BackgroundColor
#c58c00
.pf-c-button.pf-m-warning:focus--pf-c-button--m-warning--Color
#151515
.pf-c-button.pf-m-warning:focus--pf-c-button--m-warning--BackgroundColor
#c58c00
.pf-c-button.pf-m-warning:active--pf-c-button--m-warning--Color
#151515
.pf-c-button.pf-m-warning:active--pf-c-button--m-warning--BackgroundColor
#c58c00
.pf-c-button.pf-m-link--pf-c-button--disabled--BackgroundColor
transparent
.pf-c-button.pf-m-link:not(.pf-m-inline):hover--pf-c-button--m-link--Color
#004080
.pf-c-button.pf-m-link:not(.pf-m-inline):hover--pf-c-button--m-link--BackgroundColor
transparent
.pf-c-button.pf-m-link:not(.pf-m-inline):focus--pf-c-button--m-link--Color
#004080
.pf-c-button.pf-m-link:not(.pf-m-inline):focus--pf-c-button--m-link--BackgroundColor
transparent
.pf-c-button.pf-m-link:not(.pf-m-inline):active--pf-c-button--m-link--Color
#004080
.pf-c-button.pf-m-link:not(.pf-m-inline):active--pf-c-button--m-link--BackgroundColor
transparent
.pf-c-button.pf-m-link.pf-m-inline--pf-c-button--FontSize
inherit
.pf-c-button.pf-m-link.pf-m-inline:hover--pf-c-button--m-link--Color
#004080
.pf-c-button.pf-m-link.pf-m-display-lg--pf-c-button--FontSize
1.125rem
.pf-c-button.pf-m-control--pf-c-button--BorderRadius
0
.pf-c-button.pf-m-control--pf-c-button--disabled--BackgroundColor
#f0f0f0
.pf-c-button.pf-m-control--pf-c-button--after--BorderWidth
1px
.pf-c-button.pf-m-control--pf-c-button--after--BorderColor
#f0f0f0 #f0f0f0 #8a8d90 #f0f0f0
.pf-c-button.pf-m-control:hover--pf-c-button--m-control--Color
#151515
.pf-c-button.pf-m-control:hover--pf-c-button--m-control--BackgroundColor
#fff
.pf-c-button.pf-m-control:hover--pf-c-button--m-control--after--BorderBottomColor
#06c
.pf-c-button.pf-m-control:active--pf-c-button--m-control--Color
#151515
.pf-c-button.pf-m-control:active--pf-c-button--m-control--BackgroundColor
#fff
.pf-c-button.pf-m-control:active--pf-c-button--m-control--after--BorderBottomColor
#06c
.pf-c-button.pf-m-control:focus--pf-c-button--m-control--Color
#151515
.pf-c-button.pf-m-control:focus--pf-c-button--m-control--BackgroundColor
#fff
.pf-c-button.pf-m-control:focus--pf-c-button--m-control--after--BorderBottomColor
#06c
.pf-c-button.pf-m-control.pf-m-expanded--pf-c-button--m-control--Color
#151515
.pf-c-button.pf-m-control.pf-m-expanded--pf-c-button--m-control--BackgroundColor
#fff
.pf-c-button.pf-m-control.pf-m-expanded--pf-c-button--m-control--after--BorderBottomColor
#06c
.pf-c-button.pf-m-plain--pf-c-button--disabled--Color
#d2d2d2
.pf-c-button.pf-m-plain--pf-c-button--disabled--BackgroundColor
transparent
.pf-c-button.pf-m-plain:hover--pf-c-button--m-plain--Color
#151515
.pf-c-button.pf-m-plain:hover--pf-c-button--m-plain--BackgroundColor
transparent
.pf-c-button.pf-m-plain:active--pf-c-button--m-plain--Color
#151515
.pf-c-button.pf-m-plain:active--pf-c-button--m-plain--BackgroundColor
transparent
.pf-c-button.pf-m-plain:focus--pf-c-button--m-plain--Color
#151515
.pf-c-button.pf-m-plain:focus--pf-c-button--m-plain--BackgroundColor
transparent
.pf-c-button:disabled--pf-c-button--after--BorderColor
transparent
.pf-c-button.pf-m-aria-disabled--pf-c-button--after--BorderWidth
0
.pf-c-button.pf-m-aria-disabled--pf-c-button--m-link--m-inline--hover--TextDecoration
none
.pf-c-button.pf-m-progress--pf-c-button--PaddingRight
calc(1rem + calc(1.125rem + 0.5rem) / 2)
.pf-c-button.pf-m-progress--pf-c-button--PaddingLeft
calc(1rem + calc(1.125rem + 0.5rem) / 2)
.pf-c-button.pf-m-in-progress--pf-c-button--PaddingRight
1rem
.pf-c-button.pf-m-in-progress--pf-c-button--PaddingLeft
calc(1rem + calc(1.125rem + 0.5rem))
.pf-c-button__progress .pf-c-spinner--pf-c-spinner--Color
currentColor
.pf-m-overpass-font .pf-c-button--pf-c-button--FontWeight
700

View source on GitHub