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
childrennode''content rendered inside the button
classNamestring''additional classes added to the button
componentcustom'button'Sets the base component to render. defaults to button
isActiveboolfalseAdds active styling to button.
isBlockboolfalseAdds block styling to button
isDisabledboolfalseDisables the button and adds disabled styling
isFocusboolfalseAdds focus styling to the button
isHoverboolfalseAdds hover styling to the button
isInlineboolfalseAdds inline styling to a link button
typeenum'button'Sets button type
variantenum'primary'Adds button variant styles
aria-labelstringnullAdds accessible text to the button.
anyAdditional props are spread to the container <button>

CSS Variables

--pf-c-button--BorderColorc_button_BorderColortransparent
--pf-c-button--BorderRadiusc_button_BorderRadius0
--pf-c-button--BorderWidthc_button_BorderWidth2px
--pf-c-button--FontSizec_button_FontSize1rem
--pf-c-button--FontWeightc_button_FontWeight500
--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#72767b
--pf-c-button--focus--BorderWidthc_button_focus_BorderWidth2px
--pf-c-button--hover--BorderWidthc_button_hover_BorderWidth2px
--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-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