React

Button

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

ExamplesPropsCSS variables

Examples

Block button

Copied to clipboard

Button variants

Copied to clipboard
Copied to clipboard

Props

Button props

The Button component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the button
classNamestring''Additional classes added to the button
componentReact.ReactNode'button'Sets the base component to render. defaults to button
isActivebooleanfalseAdds active styling to button.
isBlockbooleanfalseAdds block styling to button
isDisabledbooleanfalseDisables the button and adds disabled styling
isFocusbooleanfalseAdds focus styling to the button
isHoverbooleanfalseAdds hover styling to the button
isInlinebooleanfalseAdds inline styling to a link button
type'button' | 'submit' | 'reset'ButtonType.buttonSets button type
variant'primary' | 'secondary' | 'tertiary' | 'danger' | 'link' | 'plain' | 'control'ButtonVariant.primaryAdds button variant styles
aria-labelstringnullAdds accessible text to the button.
iconReact.ReactNode | nullnullIcon for the button if variant is a link
ouiaContextnull
ouiaIdnull

CSS variables

--pf-c-button--BorderColorc_button_BorderColortransparent
--pf-c-button--BorderRadiusc_button_BorderRadius0
--pf-c-button--BorderWidthc_button_BorderWidth1px
--pf-c-button--FontSizec_button_FontSize1rem
--pf-c-button--FontWeightc_button_FontWeight400
--pf-c-button--LineHeightc_button_LineHeight1.5
--pf-c-button--PaddingBottomc_button_PaddingBottom0.375rem
--pf-c-button--PaddingLeftc_button_PaddingLeft1rem
--pf-c-button--PaddingRightc_button_PaddingRight1rem
--pf-c-button--PaddingTopc_button_PaddingTop0.375rem
--pf-c-button__icon--MarginRightc_button__icon_MarginRight0.25rem
--pf-c-button--active--BorderWidthc_button_active_BorderWidth2px
--pf-c-button--disabled--BackgroundColorc_button_disabled_BackgroundColor#d2d2d2
--pf-c-button--disabled--BorderColorc_button_disabled_BorderColortransparent
--pf-c-button--disabled--Colorc_button_disabled_Color#737679
--pf-c-button--focus--BorderWidthc_button_focus_BorderWidth2px
--pf-c-button--hover--BorderWidthc_button_hover_BorderWidth2px
--pf-c-button--m-control--active--after--BorderBottomColorc_button_m_control_active_after_BorderBottomColor#06c
--pf-c-button--m-control--active--after--BorderBottomWidthc_button_m_control_active_after_BorderBottomWidth2px
--pf-c-button--m-control--after--BorderBottomColorc_button_m_control_after_BorderBottomColor#ededed
--pf-c-button--m-control--after--BorderLeftColorc_button_m_control_after_BorderLeftColor#ededed
--pf-c-button--m-control--after--BorderRightColorc_button_m_control_after_BorderRightColor#ededed
--pf-c-button--m-control--after--BorderTopColorc_button_m_control_after_BorderTopColor#ededed
--pf-c-button--m-control--after--BorderWidthc_button_m_control_after_BorderWidth1px
--pf-c-button--m-control--disabled--BackgroundColorc_button_m_control_disabled_BackgroundColortransparent
--pf-c-button--m-control--disabled--after--BorderBottomColorc_button_m_control_disabled_after_BorderBottomColor#ededed
--pf-c-button--m-control--focus--after--BorderBottomColorc_button_m_control_focus_after_BorderBottomColor#06c
--pf-c-button--m-control--focus--after--BorderBottomWidthc_button_m_control_focus_after_BorderBottomWidth2px
--pf-c-button--m-control--hover--after--BorderBottomColorc_button_m_control_hover_after_BorderBottomColor#06c
--pf-c-button--m-control--hover--after--BorderBottomWidthc_button_m_control_hover_after_BorderBottomWidth2px
--pf-c-button--m-control--m-expanded--after--BorderBottomColorc_button_m_control_m_expanded_after_BorderBottomColor#06c
--pf-c-button--m-control--m-expanded--after--BorderBottomWidthc_button_m_control_m_expanded_after_BorderBottomWidth2px
--pf-c-button--m-danger--BackgroundColorc_button_m_danger_BackgroundColor#a30000
--pf-c-button--m-danger--Colorc_button_m_danger_Color#fff
--pf-c-button--m-danger--active--BackgroundColorc_button_m_danger_active_BackgroundColor#a30000
--pf-c-button--m-danger--active--Colorc_button_m_danger_active_Color#fff
--pf-c-button--m-danger--focus--BackgroundColorc_button_m_danger_focus_BackgroundColor#a30000
--pf-c-button--m-danger--focus--Colorc_button_m_danger_focus_Color#fff
--pf-c-button--m-danger--hover--BackgroundColorc_button_m_danger_hover_BackgroundColor#a30000
--pf-c-button--m-danger--hover--Colorc_button_m_danger_hover_Color#fff
--pf-c-button--m-link--Colorc_button_m_link_Color#004080
--pf-c-button--m-link--active--Colorc_button_m_link_active_Color#004080
--pf-c-button--m-link--disabled--BackgroundColorc_button_m_link_disabled_BackgroundColortransparent
--pf-c-button--m-link--focus--Colorc_button_m_link_focus_Color#004080
--pf-c-button--m-link--hover--Colorc_button_m_link_hover_Color#004080
--pf-c-button--m-link--m-inline--hover--Colorc_button_m_link_m_inline_hover_Color#004080
--pf-c-button--m-link--m-inline--hover--TextDecorationc_button_m_link_m_inline_hover_TextDecorationunderline
--pf-c-button--m-plain--Colorc_button_m_plain_Color#d2d2d2
--pf-c-button--m-plain--active--Colorc_button_m_plain_active_Color#151515
--pf-c-button--m-plain--disabled--BackgroundColorc_button_m_plain_disabled_BackgroundColortransparent
--pf-c-button--m-plain--disabled--Colorc_button_m_plain_disabled_Color#d2d2d2
--pf-c-button--m-plain--focus--Colorc_button_m_plain_focus_Color#151515
--pf-c-button--m-plain--hover--Colorc_button_m_plain_hover_Color#151515
--pf-c-button--m-primary--BackgroundColorc_button_m_primary_BackgroundColor#fff
--pf-c-button--m-primary--Colorc_button_m_primary_Color#06c
--pf-c-button--m-primary--active--BackgroundColorc_button_m_primary_active_BackgroundColor#ededed
--pf-c-button--m-primary--active--Colorc_button_m_primary_active_Color#06c
--pf-c-button--m-primary--focus--BackgroundColorc_button_m_primary_focus_BackgroundColor#ededed
--pf-c-button--m-primary--focus--Colorc_button_m_primary_focus_Color#06c
--pf-c-button--m-primary--hover--BackgroundColorc_button_m_primary_hover_BackgroundColor#ededed
--pf-c-button--m-primary--hover--Colorc_button_m_primary_hover_Color#06c
--pf-c-button--m-secondary--BackgroundColorc_button_m_secondary_BackgroundColortransparent
--pf-c-button--m-secondary--BorderColorc_button_m_secondary_BorderColor#fff
--pf-c-button--m-secondary--Colorc_button_m_secondary_Color#fff
--pf-c-button--m-secondary--active--BackgroundColorc_button_m_secondary_active_BackgroundColortransparent
--pf-c-button--m-secondary--active--BorderColorc_button_m_secondary_active_BorderColor#fff
--pf-c-button--m-secondary--active--Colorc_button_m_secondary_active_Color#fff
--pf-c-button--m-secondary--focus--BackgroundColorc_button_m_secondary_focus_BackgroundColortransparent
--pf-c-button--m-secondary--focus--BorderColorc_button_m_secondary_focus_BorderColor#fff
--pf-c-button--m-secondary--focus--Colorc_button_m_secondary_focus_Color#fff
--pf-c-button--m-secondary--hover--BackgroundColorc_button_m_secondary_hover_BackgroundColortransparent
--pf-c-button--m-secondary--hover--BorderColorc_button_m_secondary_hover_BorderColor#fff
--pf-c-button--m-secondary--hover--Colorc_button_m_secondary_hover_Color#fff
--pf-c-button--m-tertiary--BackgroundColorc_button_m_tertiary_BackgroundColortransparent
--pf-c-button--m-tertiary--BorderColorc_button_m_tertiary_BorderColor#151515
--pf-c-button--m-tertiary--Colorc_button_m_tertiary_Color#151515
--pf-c-button--m-tertiary--active--BackgroundColorc_button_m_tertiary_active_BackgroundColortransparent
--pf-c-button--m-tertiary--active--BorderColorc_button_m_tertiary_active_BorderColor#151515
--pf-c-button--m-tertiary--active--Colorc_button_m_tertiary_active_Color#151515
--pf-c-button--m-tertiary--focus--BackgroundColorc_button_m_tertiary_focus_BackgroundColortransparent
--pf-c-button--m-tertiary--focus--BorderColorc_button_m_tertiary_focus_BorderColor#151515
--pf-c-button--m-tertiary--focus--Colorc_button_m_tertiary_focus_Color#151515
--pf-c-button--m-tertiary--hover--BackgroundColorc_button_m_tertiary_hover_BackgroundColortransparent
--pf-c-button--m-tertiary--hover--BorderColorc_button_m_tertiary_hover_BorderColor#151515
--pf-c-button--m-tertiary--hover--Colorc_button_m_tertiary_hover_Color#151515