Skip to content
Patternfly Logo

Modal

Examples

Basic

With description

Top aligned

Small

Medium

Large

Width

No header

Custom Icon

Warning Alert

With wizard

With dropdown

With help

Props

NameTypeRequiredDefaultDescription
actionsanyNo[]Action buttons to add to the standard Modal Footer, ignored if `footer` is given
appendToHTMLElement | (() => HTMLElement)No() => document.bodyThe parent container to append the modal to. Defaults to document.body
aria-describedbystringNo''Id to use for Modal Box descriptor
aria-labelstringNo''Accessible descriptor of modal
aria-labelledbystring | nullNo''Id to use for Modal Box label
childrenReact.ReactNodeYesContent rendered inside the Modal.
classNamestringNo''Additional classes added to the Modal
descriptionReact.ReactNodeNoDescription of the modal
disableFocusTrapbooleanNoFlag to disable focus trap
footerReact.ReactNodeNoCustom footer
hasNoBodyWrapperbooleanNofalseFlag indicating if modal content should be placed in a modal box body wrapper
headerReact.ReactNodeNoComplex header (more than just text), supersedes title for header content
helpReact.ReactNodeNoOptional help section for the Modal Header
idstringNoundefinedAn ID to use for the ModalBox container
isOpenbooleanNofalseFlag to show the modal
onClose() => voidNo() => undefined as anyA callback for when the close button is clicked
onEscapePress(event: KeyboardEvent) => voidNoModal handles pressing of the Escape key and closes the modal. If you want to handle this yourself you can use this callback function
ouiaSafeNo type infoNotrue
positionliteralNoAlternate position of the modal
positionOffsetstringNoOffset from alternate position. Can be any valid CSS length/percentage
showClosebooleanNotrueFlag to show the close button in the header area of the modal
titlestringNo''Simple text content of the Modal Header, also used for aria-label on the body
titleIconVariant'success' | 'danger' | 'warning' | 'info' | 'default' | React.ComponentType<any>NonullOptional alert icon (or other) to show before the title of the Modal Header When the predefined alert types are used the default styling will be automatically applied
titleLabelstringNo''Optional title label text for screen readers
variant'small' | 'medium' | 'large' | 'default'No'default'Variant of the modal
widthnumber | stringNoDefault width of the Modal.
NameTypeRequiredDefaultDescription
aria-describedbystringYesId to use for Modal Box description
aria-labelstringNo''Accessible descriptor of modal
aria-labelledbystringNoId to use for Modal Box label
childrenReact.ReactNodeYesContent rendered inside the ModalBox.
classNamestringNo''Additional classes added to the ModalBox
positionliteralNoAlternate position of the modal
positionOffsetstringNoOffset from alternate position. Can be any valid CSS length/percentage
variant'small' | 'medium' | 'large' | 'default'No'default'Variant of the modal

ModalBoxBody

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the ModalBoxBody
classNamestringNo''Additional classes added to the ModalBoxBody

ModalBoxCloseButton

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

ModalBoxFooter

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the Footer
classNamestringNo''Additional classes added to the Footer

ModalContent

NameTypeRequiredDefaultDescription
actionsanyNo[]Action buttons to add to the standard Modal Footer, ignored if `footer` is given
aria-describedbystringNoId of Modal Box description
aria-labelstringNo''Accessible descriptor of modal
aria-labelledbystring | nullNoId of Modal Box label
boxIdstringYesId of the ModalBox container
childrenReact.ReactNodeYesContent rendered inside the Modal.
classNamestringNo''Additional classes added to the button
descriptionReact.ReactNodeNonullDescription of the modal
descriptorIdstringYesId of the ModalBoxBody
disableFocusTrapbooleanNofalseFlag to disable focus trap
footerReact.ReactNodeNonullCustom footer
hasNoBodyWrapperbooleanNofalseFlag indicating if modal content should be placed in a modal box body wrapper
headerReact.ReactNodeNonullComplex header (more than just text), supersedes title for header content
helpReact.ReactNodeNonullOptional help section for the Modal Header
isOpenbooleanNofalseFlag to show the modal
labelIdstringYesId of the ModalBox title
onClose() => voidNo() => undefined as anyA callback for when the close button is clicked
ouiaSafeNo type infoNotrue
positionliteralNoAlternate position of the modal
positionOffsetstringNoOffset from alternate position. Can be any valid CSS length/percentage
showClosebooleanNotrueFlag to show the close button in the header area of the modal
titlestringNo''Simple text content of the Modal Header, also used for aria-label on the body
titleIconVariant'success' | 'danger' | 'warning' | 'info' | 'default' | React.ComponentType<any>NonullOptional alert icon (or other) to show before the title of the Modal Header When the predefined alert types are used the default styling will be automatically applied
titleLabelstringNo''Optional title label text for screen readers
variant'small' | 'medium' | 'large' | 'default'No'default'Variant of the modal
widthnumber | stringNo-1Default width of the content.

CSS variables

.pf-c-modal-box--pf-c-modal-box--BackgroundColor
#fff
.pf-c-modal-box--pf-c-modal-box--BoxShadow
0 1rem 2rem 0 rgba(3, 3, 3, 0.16), 0 0 0.5rem 0 rgba(3, 3, 3, 0.1)
.pf-c-modal-box--pf-c-modal-box--ZIndex
500
.pf-c-modal-box--pf-c-modal-box--Width
100%
.pf-c-modal-box--pf-c-modal-box--MaxWidth
calc(100% - 2rem)
.pf-c-modal-box--pf-c-modal-box--m-sm--sm--MaxWidth
35rem
.pf-c-modal-box--pf-c-modal-box--m-md--Width
52.5rem
.pf-c-modal-box--pf-c-modal-box--m-lg--lg--MaxWidth
70rem
.pf-c-modal-box--pf-c-modal-box--MaxHeight
calc(100% - 3rem)
.pf-c-modal-box--pf-c-modal-box--m-align-top--spacer
0.5rem
.pf-c-modal-box--pf-c-modal-box--m-align-top--xl--spacer
2rem
.pf-c-modal-box--pf-c-modal-box--m-align-top--MarginTop
0.5rem
.pf-c-modal-box--pf-c-modal-box--m-align-top--MaxHeight
calc(100% - min(0.5rem, 3rem) - 0.5rem)
.pf-c-modal-box--pf-c-modal-box--m-align-top--MaxWidth
calc(100% - min(0.5rem * 2, 2rem))
.pf-c-modal-box--pf-c-modal-box--m-danger__title-icon--Color
#c9190b
.pf-c-modal-box--pf-c-modal-box--m-warning__title-icon--Color
#f0ab00
.pf-c-modal-box--pf-c-modal-box--m-success__title-icon--Color
#3e8635
.pf-c-modal-box--pf-c-modal-box--m-info__title-icon--Color
#2b9af3
.pf-c-modal-box--pf-c-modal-box--m-default__title-icon--Color
#009596
.pf-c-modal-box--pf-c-modal-box__header--PaddingTop
1.5rem
.pf-c-modal-box--pf-c-modal-box__header--PaddingRight
1.5rem
.pf-c-modal-box--pf-c-modal-box__header--PaddingLeft
1.5rem
.pf-c-modal-box--pf-c-modal-box__header--last-child--PaddingBottom
1.5rem
.pf-c-modal-box--pf-c-modal-box__title--LineHeight
1.3
.pf-c-modal-box--pf-c-modal-box__title--FontFamily
'"RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif'
.pf-c-modal-box--pf-c-modal-box__title--FontSize
1.5rem
.pf-c-modal-box--pf-c-modal-box__title-icon--MarginRight
0.5rem
.pf-c-modal-box--pf-c-modal-box__title-icon--Color
#151515
.pf-c-modal-box--pf-c-modal-box__description--PaddingTop
0.25rem
.pf-c-modal-box--pf-c-modal-box__body--MinHeight
calc(1rem * 1.5)
.pf-c-modal-box--pf-c-modal-box__body--PaddingTop
1.5rem
.pf-c-modal-box--pf-c-modal-box__body--PaddingRight
1.5rem
.pf-c-modal-box--pf-c-modal-box__body--PaddingLeft
1.5rem
.pf-c-modal-box--pf-c-modal-box__body--last-child--PaddingBottom
1.5rem
.pf-c-modal-box--pf-c-modal-box__header--body--PaddingTop
1rem
.pf-c-modal-box--pf-c-modal-box--c-button--Top
calc(1.5rem)
.pf-c-modal-box--pf-c-modal-box--c-button--Right
1rem
.pf-c-modal-box--pf-c-modal-box--c-button--sibling--MarginRight
calc(2rem + 0.5rem)
.pf-c-modal-box--pf-c-modal-box__footer--PaddingTop
1.5rem
.pf-c-modal-box--pf-c-modal-box__footer--PaddingRight
1.5rem
.pf-c-modal-box--pf-c-modal-box__footer--PaddingBottom
1.5rem
.pf-c-modal-box--pf-c-modal-box__footer--PaddingLeft
1.5rem
.pf-c-modal-box--pf-c-modal-box__footer--c-button--MarginRight
1rem
.pf-c-modal-box--pf-c-modal-box__footer--c-button--sm--MarginRight
calc(1rem / 2)
.pf-c-modal-box.pf-m-sm--pf-c-modal-box--Width
35rem
.pf-c-modal-box.pf-m-md--pf-c-modal-box--Width
52.5rem
.pf-c-modal-box.pf-m-lg--pf-c-modal-box--Width
70rem
.pf-c-modal-box.pf-m-danger--pf-c-modal-box__title-icon--Color
#c9190b
.pf-c-modal-box.pf-m-warning--pf-c-modal-box__title-icon--Color
#f0ab00
.pf-c-modal-box.pf-m-success--pf-c-modal-box__title-icon--Color
#3e8635
.pf-c-modal-box.pf-m-default--pf-c-modal-box__title-icon--Color
#009596
.pf-c-modal-box.pf-m-info--pf-c-modal-box__title-icon--Color
#2b9af3
.pf-c-modal-box__header + .pf-c-modal-box__body--pf-c-modal-box__body--PaddingTop
1rem

View source on GitHub