React

Modals load and display important information without navigating away from the current page. The user cannot perform other actions until the modal is dismissed. Related design guidelines: Modal

ExamplesPropsCSS Variables

Examples

Simple modal

Copied to clipboard
Copied to clipboard
Copied to clipboard
Copied to clipboard
Copied to clipboard

Props

The Modal component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodecontent rendered inside the Modal.
classNamestring''additional classes added to the Modal
isOpenboolfalseFlag to show the modal
titlestringContent of the Modal Header
hideTitleboolfalseFlag to show the title
ariaDescribedByIdstring''id to use for Modal Box description
actionsany[]Action buttons to put in the Modal Footer
onClosefunc() => undefinedA callback for when the close button is clicked
widthunionnullDefault width of the Modal.
isLargeboolfalseCreates a large version of the Modal
isSmallboolfalseCreates a small version of the Modal
anyAdditional props are passed and spread in the Modal body container <div>

CSS Variables

--pf-c-modal-box--BackgroundColorc_modal_box_BackgroundColor#fff
--pf-c-modal-box--BorderColorc_modal_box_BorderColortransparent
--pf-c-modal-box--BorderSizec_modal_box_BorderSize1px
--pf-c-modal-box--BoxShadowc_modal_box_BoxShadow0 0.1875rem 0.4375rem 0.1875rem rgba(3,3,3,.13),0 0.6875rem 1.5rem 1rem rgba(3,3,3,.12)
--pf-c-modal-box--MaxHeightc_modal_box_MaxHeightcalc(100vh - 3rem)
--pf-c-modal-box--MaxWidthc_modal_box_MaxWidthcalc(100% - 2rem)
--pf-c-modal-box--PaddingBottomc_modal_box_PaddingBottom2rem
--pf-c-modal-box--PaddingLeftc_modal_box_PaddingLeft2rem
--pf-c-modal-box--PaddingRightc_modal_box_PaddingRight2rem
--pf-c-modal-box--PaddingTopc_modal_box_PaddingTop2rem
--pf-c-modal-box--Widthc_modal_box_Width100%
--pf-c-modal-box--ZIndexc_modal_box_ZIndex600
--pf-c-modal-box__footer--MarginTopc_modal_box__footer_MarginTop2rem
--pf-c-modal-box__footer--c-button--MarginRightc_modal_box__footer_c_button_MarginRight1rem
--pf-c-modal-box__footer--c-button--sm--MarginRightc_modal_box__footer_c_button_sm_MarginRightcalc(1rem / 2)
--pf-c-modal-box--body--MinHeightc_modal_box_body_MinHeightcalc(1rem * 1.5)
--pf-c-modal-box--c-button--Rightc_modal_box_c_button_Right1rem
--pf-c-modal-box--c-button--Topc_modal_box_c_button_Topcalc(2rem - 0.375rem + 0.0625rem)
--pf-c-modal-box--c-button--sibling--MarginRightc_modal_box_c_button_sibling_MarginRight2rem
--pf-c-modal-box--c-title--body--MarginTopc_modal_box_c_title_body_MarginTop1.5rem
--pf-c-modal-box--m-lg--lg--MaxWidthc_modal_box_m_lg_lg_MaxWidth70rem
--pf-c-modal-box--m-sm--sm--MaxWidthc_modal_box_m_sm_sm_MaxWidth35rem