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 level

Variations

Props

Button properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the button
classNamestring''Additional classes added to the button
componentReact.ElementType<any>'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
ouiaContextnullnull
ouiaIdnullnull

CSS Variables

--pf-c-button__icon--MarginRightc_button__icon_MarginRight
0.25rem
--pf-c-button--active--BorderWidthc_button_active_BorderWidth
2px
--pf-c-button--BorderColorc_button_BorderColor
transparent
--pf-c-button--BorderRadiusc_button_BorderRadius
0
--pf-c-button--BorderWidthc_button_BorderWidth
1px
--pf-c-button--disabled--BackgroundColorc_button_disabled_BackgroundColor
#d2d2d2
--pf-c-button--disabled--BorderColorc_button_disabled_BorderColor
transparent
--pf-c-button--disabled--Colorc_button_disabled_Color
#737679
--pf-c-button--focus--BorderWidthc_button_focus_BorderWidth
2px
--pf-c-button--FontSizec_button_FontSize
1rem
--pf-c-button--FontWeightc_button_FontWeight
400
--pf-c-button--hover--BorderWidthc_button_hover_BorderWidth
2px
--pf-c-button--LineHeightc_button_LineHeight
1.5
--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_BorderBottomWidth
2px
--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_BorderWidth
1px
--pf-c-button--m-control--disabled--after--BorderBottomColorc_button_m_control_disabled_after_BorderBottomColor
#ededed
--pf-c-button--m-control--disabled--BackgroundColorc_button_m_control_disabled_BackgroundColor
transparent
--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_BorderBottomWidth
2px
--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_BorderBottomWidth
2px
--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_BorderBottomWidth
2px
--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--BackgroundColorc_button_m_danger_BackgroundColor
#a30000
--pf-c-button--m-danger--Colorc_button_m_danger_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--active--Colorc_button_m_link_active_Color
#004080
--pf-c-button--m-link--Colorc_button_m_link_Color
#004080
--pf-c-button--m-link--disabled--BackgroundColorc_button_m_link_disabled_BackgroundColor
transparent
--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_TextDecoration
underline
--pf-c-button--m-plain--active--Colorc_button_m_plain_active_Color
#151515
--pf-c-button--m-plain--Colorc_button_m_plain_Color
#d2d2d2
--pf-c-button--m-plain--disabled--BackgroundColorc_button_m_plain_disabled_BackgroundColor
transparent
--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--active--BackgroundColorc_button_m_primary_active_BackgroundColor
#004080
--pf-c-button--m-primary--active--Colorc_button_m_primary_active_Color
#fff
--pf-c-button--m-primary--BackgroundColorc_button_m_primary_BackgroundColor
#004080
--pf-c-button--m-primary--Colorc_button_m_primary_Color
#fff
--pf-c-button--m-primary--focus--BackgroundColorc_button_m_primary_focus_BackgroundColor
#004080
--pf-c-button--m-primary--focus--Colorc_button_m_primary_focus_Color
#fff
--pf-c-button--m-primary--hover--BackgroundColorc_button_m_primary_hover_BackgroundColor
#004080
--pf-c-button--m-primary--hover--Colorc_button_m_primary_hover_Color
#fff
--pf-c-button--m-secondary--active--BackgroundColorc_button_m_secondary_active_BackgroundColor
transparent
--pf-c-button--m-secondary--active--BorderColorc_button_m_secondary_active_BorderColor
#06c
--pf-c-button--m-secondary--active--Colorc_button_m_secondary_active_Color
#06c
--pf-c-button--m-secondary--BackgroundColorc_button_m_secondary_BackgroundColor
transparent
--pf-c-button--m-secondary--BorderColorc_button_m_secondary_BorderColor
#06c
--pf-c-button--m-secondary--Colorc_button_m_secondary_Color
#06c
--pf-c-button--m-secondary--focus--BackgroundColorc_button_m_secondary_focus_BackgroundColor
transparent
--pf-c-button--m-secondary--focus--BorderColorc_button_m_secondary_focus_BorderColor
#06c
--pf-c-button--m-secondary--focus--Colorc_button_m_secondary_focus_Color
#06c
--pf-c-button--m-secondary--hover--BackgroundColorc_button_m_secondary_hover_BackgroundColor
transparent
--pf-c-button--m-secondary--hover--BorderColorc_button_m_secondary_hover_BorderColor
#06c
--pf-c-button--m-secondary--hover--Colorc_button_m_secondary_hover_Color
#06c
--pf-c-button--m-tertiary--active--BackgroundColorc_button_m_tertiary_active_BackgroundColor
transparent
--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--BackgroundColorc_button_m_tertiary_BackgroundColor
transparent
--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--focus--BackgroundColorc_button_m_tertiary_focus_BackgroundColor
transparent
--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_BackgroundColor
transparent
--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
--pf-c-button--PaddingBottomc_button_PaddingBottom
0.375rem
--pf-c-button--PaddingLeftc_button_PaddingLeft
1rem
--pf-c-button--PaddingRightc_button_PaddingRight
1rem
--pf-c-button--PaddingTopc_button_PaddingTop
0.375rem