Skip to Content
Patternfly Logo

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

With description

Small

Large

Width

No header

Props

Modal properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeYesContent rendered inside the Modal.
classNamestringNo''Additional classes added to the Modal
isOpenbooleanNofalseFlag to show the modal
headerReact.ReactNodeNoComplex header (more than just text), supersedes title for header content
titlestringYesSimple text content of the Modal Header, also used for aria-label on the body
hideTitlebooleanNofalseFlag to hide the title
showClosebooleanNotrueFlag to show the close button in the header area of the modal
ariaDescribedByIdstringNo''Id to use for Modal Box description
footerReact.ReactNodeNoCustom footer
actionsanyNo[]Action buttons to add to the standard Modal Footer, ignored if `footer` is given
isFooterLeftAlignedbooleanNofalseFlag to indicate that the Footer content is left aligned
onClose() => voidNo() => undefined as anyA callback for when the close button is clicked
widthnumber | stringNoDefault width of the Modal.
isLargebooleanNofalseCreates a large version of the Modal
isSmallbooleanNofalseCreates a small version of the Modal
appendToHTMLElement | (() => HTMLElement)No(typeof document !== 'undefined' && document.body) || nullThe parent container to append the modal to. Defaults to document.body
disableFocusTrapbooleanNoFlag to disable focus trap
descriptionReact.ReactNodeNoDescription of the modal
ModalBox properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeYesContent rendered inside the ModalBox.
classNamestringNo''Additional classes added to the ModalBox
isLargebooleanNofalseCreates a large version of the ModalBox
isSmallbooleanNofalseCreates a small version of the ModalBox.
titlestringYesString to use for Modal Box aria-label
idstringYesId to use for Modal Box description
ModalBoxBody properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the ModalBoxBody
classNamestringNo''Additional classes added to the ModalBoxBody
ModalBoxCloseButton properties
NameTypeRequiredDefaultDescription
classNamestringNo''Additional classes added to the close button
onClose() => voidNo() => undefined as anyA callback for when the close button is clicked
ModalBoxFooter properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the Footer
classNamestringNo''Additional classes added to the Footer
isLeftAlignedbooleanNofalseFlag to align buttons to the left
ModalBoxHeader properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the Header
classNamestringNo''Additional classes added to the button
hideTitlebooleanNofalseFlag to hide the title
headingLevel'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'NoTitleLevel.h1The heading level to use
ModalContent properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeYesContent rendered inside the Modal.
classNamestringNo''Additional classes added to the button
isLargebooleanNofalseCreates a large version of the Modal
isSmallbooleanNofalseCreates a small version of the Modal
isOpenbooleanNofalseFlag to show the modal
headerReact.ReactNodeNonullComplex header (more than just text), supersedes title for header content
descriptionReact.ReactNodeNonullDescription of the modal
titlestringYesSimple text content of the Modal Header, also used for aria-label on the body
hideTitlebooleanNofalseFlag to show the title (ignored for custom headers)
showClosebooleanNotrueFlag to show the close button in the header area of the modal
widthnumber | stringNo-1Default width of the content.
footerReact.ReactNodeNonullCustom footer
actionsanyNo[]Action buttons to add to the standard Modal Footer, ignored if `footer` is given
isFooterLeftAlignedbooleanNofalseFlag to indicate that the Footer content is left aligned
onClose() => voidNo() => undefined as anyA callback for when the close button is clicked
ariaDescribedByIdstringNo''Id to use for Modal Box description
idstringNo''Id of the ModalBoxBody
disableFocusTrapbooleanNofalseFlag to disable focus trap

CSS Variables

--pf-c-modal-box__c-title--description--MarginTopc_modal_box__c_title_description_MarginTop
0.5rem
--pf-c-modal-box__description--body--MarginTopc_modal_box__description_body_MarginTop
1.5rem
--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