React

Info alert:Opt-in feature

In a future breaking-change release, the modal footer buttons will default to be left aligned. You can opt into this now by setting the Modal isFooterLeftAligned prop to true.

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
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
headerReact.ReactNodeComplex header (more than just text), supersedes title for header content
titlestringSimple text content of the Modal Header, also used for aria-label on the body
hideTitlebooleanfalseFlag to hide the title
showClosebooleantrueFlag to show the close button in the header area of the modal
ariaDescribedByIdstring''Id to use for Modal Box description
footerReact.ReactNodeCustom footer
actionsany[] as any[]Action buttons to add to the standard Modal Footer, ignored if `footer` is given
isFooterLeftAlignedbooleanfalseFlag to indicate that the Footer content is left aligned
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
appendToHTMLElement | (() => HTMLElement)typeof document !== 'undefined' && document.body || nullThe parent container to append the modal to. Defaults to document.body
disableFocusTrapbooleanFlag to disable focus trap

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

ModalBoxFooter props

The ModalBoxFooter component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the Footer
classNamestring''Additional classes added to the Footer
isLeftAlignedbooleanfalseFlag to align buttons to the left

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

ModalContent props

The ModalContent component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeContent rendered inside the Modal.
classNamestring''Additional classes added to the button
isLargebooleanfalseCreates a large version of the Modal
isSmallbooleanfalseCreates a small version of the Modal
isOpenbooleanfalseFlag to show the modal
headerReact.ReactNodenullComplex header (more than just text), supersedes title for header content
titlestringSimple text content of the Modal Header, also used for aria-label on the body
hideTitlebooleanfalseFlag to show the title (ignored for custom headers)
showClosebooleantrueFlag to show the close button in the header area of the modal
widthnumber | string-1Default width of the content.
footerReact.ReactNodenullCustom footer
actionsany[]Action buttons to add to the standard Modal Footer, ignored if `footer` is given
isFooterLeftAlignedbooleanfalseFlag to indicate that the Footer content is left aligned
onClose() => void() => undefined as anyA callback for when the close button is clicked
ariaDescribedByIdstring''Id to use for Modal Box description
idstring''Id of the ModalBoxBody
disableFocusTrapbooleanfalseFlag to disable focus trap

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

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--first-of-type--MarginLeftc_modal_box__footer__c_button_first_of_type_MarginLeft0
--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