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
childrenReact.ReactNodeContent rendered inside the Modal.
classNamestring''Additional classes added to the Modal
isOpenbooleanfalseFlag to show the modal
titlestringContent of the Modal Header
hideTitlebooleanfalseFlag to hide the title
ariaDescribedByIdstring''Id to use for Modal Box description
actionsany[] as any[]Action buttons to put in the Modal Footer
onClose() => void() => undefined as anyA callback for when the close button is clicked
widthnumber | stringDefault width of the Modal.
isLargebooleanfalseCreates a large version of the Modal
isSmallbooleanfalseCreates a small version of the Modal

The ModalBox component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeContent rendered inside the ModalBox.
classNamestring''Additional classes added to the ModalBox
isLargebooleanfalseCreates a large version of the ModalBox
isSmallbooleanfalseCreates a small version of the ModalBox.
titlestringString to use for Modal Box aria-label
idstringId to use for Modal Box description

ModalBoxBody Props

The ModalBoxBody component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the ModalBoxBody
classNamestring''Additional classes added to the ModalBoxBody

ModalBoxCloseButton Props

The ModalBoxCloseButton component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the close button
onClose() => void() => undefined as anyA callback for when the close button is clicked

ModalBoxFooter Props

The ModalBoxFooter component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the Footer
classNamestring''Additional classes added to the Footer

ModalBoxHeader Props

The ModalBoxHeader component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the Header
classNamestring''Additional classes added to the button
hideTitlebooleanfalseFlag to hide the title
headingLevel'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'TitleLevel.h1The heading level to use

ModalContent Props

The ModalContent component accepts the following props.

NameTypeRequiredDefaultDescription
className''
isOpenfalse
hideTitlefalse
actions[]
onClose() => undefined as any
isLargefalse
isSmallfalse
width-1
ariaDescribedById''
id''

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_ZIndex500
--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