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

Danger alert:Warning

Please don't use this component, it's only an example of what an experimental component could be and likely going away in our next release. Use our actual Button instead.

Render button

Copied to clipboard

Props

Button Props

The Button component accepts the following props.

NameTypeRequiredDefaultDescription
renderbooleantrueDangerous prop to use at own risk
childrennull
className''
component'button'
isActivefalse
isBlockfalse
isDisabledfalse
isFocusfalse
isHoverfalse
isInlinefalse
type'button'
variant'primary'
aria-labelnull
iconnull

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_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#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-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