React

Modal

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

Basic

Small

Large

Width

No header

Props

Modal properties
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
ModalBox properties
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 properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the ModalBoxBody
classNamestring''Additional classes added to the ModalBoxBody
ModalBoxCloseButton properties
NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the close button
onClose() => void() => undefined as anyA callback for when the close button is clicked
ModalBoxFooter properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the Footer
classNamestring''Additional classes added to the Footer
isLeftAlignedbooleanfalseFlag to align buttons to the left
ModalBoxHeader properties
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 properties
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

CSS Variables

--pf-c-modal-box__footer__c-button--first-of-type--MarginLeftc_modal_box__footer__c_button_first_of_type_MarginLeft
0
--pf-c-modal-box__footer--c-button--MarginRightc_modal_box__footer_c_button_MarginRight
1rem
--pf-c-modal-box__footer--c-button--sm--MarginRightc_modal_box__footer_c_button_sm_MarginRight
calc(1rem/2)
--pf-c-modal-box__footer--MarginTopc_modal_box__footer_MarginTop
2rem
--pf-c-modal-box--BackgroundColorc_modal_box_BackgroundColor
#fff
--pf-c-modal-box--body--MinHeightc_modal_box_body_MinHeight
calc(1rem*1.5)
--pf-c-modal-box--BorderColorc_modal_box_BorderColor
transparent
--pf-c-modal-box--BorderSizec_modal_box_BorderSize
1px
--pf-c-modal-box--BoxShadowc_modal_box_BoxShadow
0 0.1875rem 0.4375rem 0.1875rem rgba(3,3,3,0.13),0 0.6875rem 1.5rem 1rem rgba(3,3,3,0.12)
--pf-c-modal-box--c-button--Rightc_modal_box_c_button_Right
1rem
--pf-c-modal-box--c-button--sibling--MarginRightc_modal_box_c_button_sibling_MarginRight
2rem
--pf-c-modal-box--c-button--Topc_modal_box_c_button_Top
calc(2rem - 0.375rem + 0.0625rem)
--pf-c-modal-box--c-title--body--MarginTopc_modal_box_c_title_body_MarginTop
1.5rem
--pf-c-modal-box--m-lg--lg--MaxWidthc_modal_box_m_lg_lg_MaxWidth
70rem
--pf-c-modal-box--m-sm--sm--MaxWidthc_modal_box_m_sm_sm_MaxWidth
35rem
--pf-c-modal-box--MaxHeightc_modal_box_MaxHeight
calc(100vh - 3rem)
--pf-c-modal-box--MaxWidthc_modal_box_MaxWidth
calc(100% - 2rem)
--pf-c-modal-box--PaddingBottomc_modal_box_PaddingBottom
2rem
--pf-c-modal-box--PaddingLeftc_modal_box_PaddingLeft
2rem
--pf-c-modal-box--PaddingRightc_modal_box_PaddingRight
2rem
--pf-c-modal-box--PaddingTopc_modal_box_PaddingTop
2rem
--pf-c-modal-box--Widthc_modal_box_Width
100%
--pf-c-modal-box--ZIndexc_modal_box_ZIndex
500