Skip to content
Patternfly Logo

Button

Examples

Variations







Disabled



Aria disabled



Aria disabled button with tooltip

Block level

Types

Small



Call to action



Progress



Props

Button

*required
NameTypeDefaultDescription
aria-labelstringAdds accessible text to the button.
childrenReact.ReactNodeContent rendered inside the button
classNamestringAdditional classes added to the button
componentReact.ElementType<any> | React.ComponentType<any>Sets the base component to render. defaults to button
iconReact.ReactNode | nullIcon for the button. Usable by all variants except for plain.
iconPosition'left' | 'right'Sets position of the link icon
innerRefReact.Ref<any>Forwarded ref
inoperableEventsstring[]Events to prevent when the button is in an aria-disabled state
isActivebooleanAdds active styling to button.
isAriaDisabledbooleanAdds disabled styling and communicates that the button is disabled using the aria-disabled html attribute
isBlockbooleanAdds block styling to button
isDangerbooleanAdds danger styling to secondary or link button variants
isDisabledbooleanAdds disabled styling and disables the button using the disabled html attribute
isInlinebooleanAdds inline styling to a link button
isLargebooleanAdds large styling to the button
isLoadingbooleanAdds progress styling to button
isSmallbooleanAdds small styling to the button
spinnerAriaValueTextstringAria-valuetext for the loading spinner
tabIndexnumberSets the button tabindex.
type'button' | 'submit' | 'reset'Sets button type
variant'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control'Adds button variant styles

CSS variables

.pf-c-button--pf-c-button--PaddingTop
0.375rem
.pf-c-button--pf-c-button--PaddingRight
1rem
.pf-c-button--pf-c-button--PaddingBottom
0.375rem
.pf-c-button--pf-c-button--PaddingLeft
1rem
.pf-c-button--pf-c-button--LineHeight
1.5
.pf-c-button--pf-c-button--FontWeight
400
.pf-c-button--pf-c-button--FontSize
1rem
.pf-c-button--pf-c-button--BackgroundColor
transparent
.pf-c-button--pf-c-button--BorderRadius
3px
.pf-c-button--pf-c-button--after--BorderRadius
3px
.pf-c-button--pf-c-button--after--BorderColor
transparent
.pf-c-button--pf-c-button--after--BorderWidth
1px
.pf-c-button--pf-c-button--hover--after--BorderWidth
2px
.pf-c-button--pf-c-button--focus--after--BorderWidth
2px
.pf-c-button--pf-c-button--active--after--BorderWidth
2px
.pf-c-button--pf-c-button--disabled--Color
#6a6e73
.pf-c-button--pf-c-button--disabled--BackgroundColor
#d2d2d2
.pf-c-button--pf-c-button--disabled--after--BorderColor
transparent
.pf-c-button--pf-c-button--m-primary--BackgroundColor
#06c
.pf-c-button--pf-c-button--m-primary--Color
#fff
.pf-c-button--pf-c-button--m-primary--hover--BackgroundColor
#004080
.pf-c-button--pf-c-button--m-primary--hover--Color
#fff
.pf-c-button--pf-c-button--m-primary--focus--BackgroundColor
#004080
.pf-c-button--pf-c-button--m-primary--focus--Color
#fff
.pf-c-button--pf-c-button--m-primary--active--BackgroundColor
#004080
.pf-c-button--pf-c-button--m-primary--active--Color
#fff
.pf-c-button--pf-c-button--m-secondary--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-secondary--after--BorderColor
#06c
.pf-c-button--pf-c-button--m-secondary--Color
#06c
.pf-c-button--pf-c-button--m-secondary--hover--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-secondary--hover--after--BorderColor
#06c
.pf-c-button--pf-c-button--m-secondary--hover--Color
#06c
.pf-c-button--pf-c-button--m-secondary--focus--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-secondary--focus--after--BorderColor
#06c
.pf-c-button--pf-c-button--m-secondary--focus--Color
#06c
.pf-c-button--pf-c-button--m-secondary--active--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-secondary--active--after--BorderColor
#06c
.pf-c-button--pf-c-button--m-secondary--active--Color
#06c
.pf-c-button--pf-c-button--m-secondary--m-danger--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-secondary--m-danger--Color
#c9190b
.pf-c-button--pf-c-button--m-secondary--m-danger--after--BorderColor
#c9190b
.pf-c-button--pf-c-button--m-secondary--m-danger--hover--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-secondary--m-danger--hover--Color
#a30000
.pf-c-button--pf-c-button--m-secondary--m-danger--hover--after--BorderColor
#c9190b
.pf-c-button--pf-c-button--m-secondary--m-danger--focus--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-secondary--m-danger--focus--Color
#a30000
.pf-c-button--pf-c-button--m-secondary--m-danger--focus--after--BorderColor
#c9190b
.pf-c-button--pf-c-button--m-secondary--m-danger--active--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-secondary--m-danger--active--Color
#a30000
.pf-c-button--pf-c-button--m-secondary--m-danger--active--after--BorderColor
#c9190b
.pf-c-button--pf-c-button--m-tertiary--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-tertiary--after--BorderColor
#151515
.pf-c-button--pf-c-button--m-tertiary--Color
#151515
.pf-c-button--pf-c-button--m-tertiary--hover--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-tertiary--hover--after--BorderColor
#151515
.pf-c-button--pf-c-button--m-tertiary--hover--Color
#151515
.pf-c-button--pf-c-button--m-tertiary--focus--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-tertiary--focus--after--BorderColor
#151515
.pf-c-button--pf-c-button--m-tertiary--focus--Color
#151515
.pf-c-button--pf-c-button--m-tertiary--active--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-tertiary--active--after--BorderColor
#151515
.pf-c-button--pf-c-button--m-tertiary--active--Color
#151515
.pf-c-button--pf-c-button--m-warning--BackgroundColor
#f0ab00
.pf-c-button--pf-c-button--m-warning--Color
#151515
.pf-c-button--pf-c-button--m-warning--hover--BackgroundColor
#c58c00
.pf-c-button--pf-c-button--m-warning--hover--Color
#151515
.pf-c-button--pf-c-button--m-warning--focus--BackgroundColor
#c58c00
.pf-c-button--pf-c-button--m-warning--focus--Color
#151515
.pf-c-button--pf-c-button--m-warning--active--BackgroundColor
#c58c00
.pf-c-button--pf-c-button--m-warning--active--Color
#151515
.pf-c-button--pf-c-button--m-danger--BackgroundColor
#c9190b
.pf-c-button--pf-c-button--m-danger--Color
#fff
.pf-c-button--pf-c-button--m-danger--hover--BackgroundColor
#a30000
.pf-c-button--pf-c-button--m-danger--hover--Color
#fff
.pf-c-button--pf-c-button--m-danger--focus--BackgroundColor
#a30000
.pf-c-button--pf-c-button--m-danger--focus--Color
#fff
.pf-c-button--pf-c-button--m-danger--active--BackgroundColor
#a30000
.pf-c-button--pf-c-button--m-danger--active--Color
#fff
.pf-c-button--pf-c-button--m-link--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-link--Color
#06c
.pf-c-button--pf-c-button--m-link--hover--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-link--hover--Color
#004080
.pf-c-button--pf-c-button--m-link--focus--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-link--focus--Color
#004080
.pf-c-button--pf-c-button--m-link--active--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-link--active--Color
#004080
.pf-c-button--pf-c-button--m-link--disabled--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-link--m-inline--FontSize
inherit
.pf-c-button--pf-c-button--m-link--m-inline--hover--TextDecoration
underline
.pf-c-button--pf-c-button--m-link--m-inline--hover--Color
#004080
.pf-c-button--pf-c-button--m-link--m-danger--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-link--m-danger--Color
#c9190b
.pf-c-button--pf-c-button--m-link--m-danger--hover--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-link--m-danger--hover--Color
#a30000
.pf-c-button--pf-c-button--m-link--m-danger--focus--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-link--m-danger--focus--Color
#a30000
.pf-c-button--pf-c-button--m-link--m-danger--active--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-link--m-danger--active--Color
#a30000
.pf-c-button--pf-c-button--m-plain--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-plain--Color
#6a6e73
.pf-c-button--pf-c-button--m-plain--hover--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-plain--hover--Color
#151515
.pf-c-button--pf-c-button--m-plain--focus--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-plain--focus--Color
#151515
.pf-c-button--pf-c-button--m-plain--active--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-plain--active--Color
#151515
.pf-c-button--pf-c-button--m-plain--disabled--Color
#d2d2d2
.pf-c-button--pf-c-button--m-plain--disabled--BackgroundColor
transparent
.pf-c-button--pf-c-button--m-control--BackgroundColor
#fff
.pf-c-button--pf-c-button--m-control--Color
#151515
.pf-c-button--pf-c-button--m-control--BorderRadius
0
.pf-c-button--pf-c-button--m-control--after--BorderWidth
1px
.pf-c-button--pf-c-button--m-control--after--BorderTopColor
#f0f0f0
.pf-c-button--pf-c-button--m-control--after--BorderRightColor
#f0f0f0
.pf-c-button--pf-c-button--m-control--after--BorderBottomColor
#8a8d90
.pf-c-button--pf-c-button--m-control--after--BorderLeftColor
#f0f0f0
.pf-c-button--pf-c-button--m-control--disabled--BackgroundColor
#f0f0f0
.pf-c-button--pf-c-button--m-control--hover--BackgroundColor
#fff
.pf-c-button--pf-c-button--m-control--hover--Color
#151515
.pf-c-button--pf-c-button--m-control--hover--after--BorderBottomWidth
2px
.pf-c-button--pf-c-button--m-control--hover--after--BorderBottomColor
#06c
.pf-c-button--pf-c-button--m-control--active--BackgroundColor
#fff
.pf-c-button--pf-c-button--m-control--active--Color
#151515
.pf-c-button--pf-c-button--m-control--active--after--BorderBottomWidth
2px
.pf-c-button--pf-c-button--m-control--active--after--BorderBottomColor
#06c
.pf-c-button--pf-c-button--m-control--focus--BackgroundColor
#fff
.pf-c-button--pf-c-button--m-control--focus--Color
#151515
.pf-c-button--pf-c-button--m-control--focus--after--BorderBottomWidth
2px
.pf-c-button--pf-c-button--m-control--focus--after--BorderBottomColor
#06c
.pf-c-button--pf-c-button--m-control--m-expanded--BackgroundColor
#fff
.pf-c-button--pf-c-button--m-control--m-expanded--Color
#151515
.pf-c-button--pf-c-button--m-control--m-expanded--after--BorderBottomWidth
2px
.pf-c-button--pf-c-button--m-control--m-expanded--after--BorderBottomColor
#06c
.pf-c-button--pf-c-button--m-small--FontSize
0.875rem
.pf-c-button--pf-c-button--m-display-lg--PaddingTop
1rem
.pf-c-button--pf-c-button--m-display-lg--PaddingRight
2rem
.pf-c-button--pf-c-button--m-display-lg--PaddingBottom
1rem
.pf-c-button--pf-c-button--m-display-lg--PaddingLeft
2rem
.pf-c-button--pf-c-button--m-display-lg--FontWeight
700
.pf-c-button--pf-c-button--m-link--m-display-lg--FontSize
1.125rem
.pf-c-button--pf-c-button__icon--m-start--MarginRight
0.25rem
.pf-c-button--pf-c-button__icon--m-end--MarginLeft
0.25rem
.pf-c-button--pf-c-button__progress--width
calc(1.125rem + 0.5rem)
.pf-c-button--pf-c-button__progress--Opacity
0
.pf-c-button--pf-c-button__progress--TranslateY
-50%
.pf-c-button--pf-c-button__progress--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-link--pf-c-button--disabled--BackgroundColor
transparent
.pf-c-button.pf-m-link:not(.pf-m-inline):hover--pf-c-button--m-link--Color
#004080
.pf-c-button.pf-m-link:not(.pf-m-inline):hover--pf-c-button--m-link--BackgroundColor
transparent
.pf-c-button.pf-m-link:not(.pf-m-inline):focus--pf-c-button--m-link--Color
#004080
.pf-c-button.pf-m-link:not(.pf-m-inline):focus--pf-c-button--m-link--BackgroundColor
transparent
.pf-c-button.pf-m-link:not(.pf-m-inline):active--pf-c-button--m-link--Color
#004080
.pf-c-button.pf-m-link:not(.pf-m-inline):active--pf-c-button--m-link--BackgroundColor
transparent
.pf-c-button.pf-m-link.pf-m-inline--pf-c-button--FontSize
inherit
.pf-c-button.pf-m-link.pf-m-inline:hover--pf-c-button--m-link--Color
#004080
.pf-c-button.pf-m-link.pf-m-display-lg--pf-c-button--FontSize
1.125rem
.pf-c-button.pf-m-danger:hover--pf-c-button--m-danger--Color
#fff
.pf-c-button.pf-m-danger:hover--pf-c-button--m-danger--BackgroundColor
#a30000
.pf-c-button.pf-m-danger:focus--pf-c-button--m-danger--Color
#fff
.pf-c-button.pf-m-danger:focus--pf-c-button--m-danger--BackgroundColor
#a30000
.pf-c-button.pf-m-danger:active--pf-c-button--m-danger--Color
#fff
.pf-c-button.pf-m-danger:active--pf-c-button--m-danger--BackgroundColor
#a30000
.pf-c-button.pf-m-danger.pf-m-secondary--pf-c-button--m-danger--Color
#c9190b
.pf-c-button.pf-m-danger.pf-m-secondary--pf-c-button--m-danger--BackgroundColor
transparent
.pf-c-button.pf-m-danger.pf-m-secondary--pf-c-button--after--BorderColor
#c9190b
.pf-c-button.pf-m-danger.pf-m-secondary:hover--pf-c-button--m-secondary--m-danger--Color
#a30000
.pf-c-button.pf-m-danger.pf-m-secondary:hover--pf-c-button--m-secondary--m-danger--BackgroundColor
transparent
.pf-c-button.pf-m-danger.pf-m-secondary:hover--pf-c-button--after--BorderColor
#c9190b
.pf-c-button.pf-m-danger.pf-m-secondary:focus--pf-c-button--m-secondary--m-danger--Color
#a30000
.pf-c-button.pf-m-danger.pf-m-secondary:focus--pf-c-button--m-secondary--m-danger--BackgroundColor
transparent
.pf-c-button.pf-m-danger.pf-m-secondary:focus--pf-c-button--after--BorderColor
#c9190b
.pf-c-button.pf-m-danger.pf-m-secondary:active--pf-c-button--m-secondary--m-danger--Color
#a30000
.pf-c-button.pf-m-danger.pf-m-secondary:active--pf-c-button--m-secondary--m-danger--BackgroundColor
transparent
.pf-c-button.pf-m-danger.pf-m-secondary:active--pf-c-button--after--BorderColor
#c9190b
.pf-c-button.pf-m-danger.pf-m-link--pf-c-button--m-danger--Color
#c9190b
.pf-c-button.pf-m-danger.pf-m-link--pf-c-button--m-danger--BackgroundColor
transparent
.pf-c-button.pf-m-danger.pf-m-link:hover--pf-c-button--m-link--m-danger--Color
#a30000
.pf-c-button.pf-m-danger.pf-m-link:hover--pf-c-button--m-link--m-danger--BackgroundColor
transparent
.pf-c-button.pf-m-danger.pf-m-link:focus--pf-c-button--m-link--m-danger--Color
#a30000
.pf-c-button.pf-m-danger.pf-m-link:focus--pf-c-button--m-link--m-danger--BackgroundColor
transparent
.pf-c-button.pf-m-danger.pf-m-link:active--pf-c-button--m-link--m-danger--Color
#a30000
.pf-c-button.pf-m-danger.pf-m-link:active--pf-c-button--m-link--m-danger--BackgroundColor
transparent
.pf-c-button.pf-m-warning:hover--pf-c-button--m-warning--Color
#151515
.pf-c-button.pf-m-warning:hover--pf-c-button--m-warning--BackgroundColor
#c58c00
.pf-c-button.pf-m-warning:focus--pf-c-button--m-warning--Color
#151515
.pf-c-button.pf-m-warning:focus--pf-c-button--m-warning--BackgroundColor
#c58c00
.pf-c-button.pf-m-warning:active--pf-c-button--m-warning--Color
#151515
.pf-c-button.pf-m-warning:active--pf-c-button--m-warning--BackgroundColor
#c58c00
.pf-c-button.pf-m-control--pf-c-button--BorderRadius
0
.pf-c-button.pf-m-control--pf-c-button--disabled--BackgroundColor
#f0f0f0
.pf-c-button.pf-m-control--pf-c-button--after--BorderWidth