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

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeContent rendered inside the Modal.
actionsany[]Action buttons to add to the standard Modal Footer, ignored if `footer` is given
appendToHTMLElement | (() => HTMLElement)() => document.bodyThe parent container to append the modal to. Defaults to document.body
aria-describedbystring''Id to use for Modal Box descriptor
aria-labelstring''Accessible descriptor of modal
aria-labelledbystring | null''Id to use for Modal Box label
classNamestring''Additional classes added to the Modal
descriptionReact.ReactNodeDescription of the modal
disableFocusTrapbooleanFlag to disable focus trap
footerReact.ReactNodeCustom footer
hasNoBodyWrapperbooleanfalseFlag indicating if modal content should be placed in a modal box body wrapper
headerReact.ReactNodeComplex header (more than just text), supersedes title for header content
helpReact.ReactNodeOptional help section for the Modal Header
idstringundefinedAn ID to use for the ModalBox container
isOpenbooleanfalseFlag to show the modal
onClose() => void() => undefined as anyA callback for when the close button is clicked
onEscapePress(event: KeyboardEvent) => voidModal 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 infotrue
positionliteralAlternate position of the modal
positionOffsetstringOffset from alternate position. Can be any valid CSS length/percentage
showClosebooleantrueFlag to show the close button in the header area of the modal
titlestring''Simple text content of the Modal Header, also used for aria-label on the body
titleIconVariant'success' | 'danger' | 'warning' | 'info' | 'default' | React.ComponentType<any>nullOptional 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
titleLabelstring''Optional title label text for screen readers
variant'small' | 'medium' | 'large' | 'default''default'Variant of the modal
widthnumber | stringDefault width of the Modal.
*required
NameTypeDefaultDescription
aria-describedbyrequiredstringId to use for Modal Box description
childrenrequiredReact.ReactNodeContent rendered inside the ModalBox.
aria-labelstring''Accessible descriptor of modal
aria-labelledbystringId to use for Modal Box label
classNamestring''Additional classes added to the ModalBox
positionliteralAlternate position of the modal
positionOffsetstringOffset from alternate position. Can be any valid CSS length/percentage
variant'small' | 'medium' | 'large' | 'default''default'Variant of the modal

ModalBoxBody

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the ModalBoxBody
classNamestring''Additional classes added to the ModalBoxBody

ModalBoxCloseButton

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

ModalBoxFooter

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the Footer
classNamestring''Additional classes added to the Footer

ModalContent

*required
NameTypeDefaultDescription
boxIdrequiredstringId of the ModalBox container
childrenrequiredReact.ReactNodeContent rendered inside the Modal.
descriptorIdrequiredstringId of the ModalBoxBody
labelIdrequiredstringId of the ModalBox title
actionsany[]Action buttons to add to the standard Modal Footer, ignored if `footer` is given
aria-describedbystringId of Modal Box description
aria-labelstring''Accessible descriptor of modal
aria-labelledbystring | nullId of Modal Box label
classNamestring''Additional classes added to the button
descriptionReact.ReactNodenullDescription of the modal
disableFocusTrapbooleanfalseFlag to disable focus trap
footerReact.ReactNodenullCustom footer
hasNoBodyWrapperbooleanfalseFlag indicating if modal content should be placed in a modal box body wrapper
headerReact.ReactNodenullComplex header (more than just text), supersedes title for header content
helpReact.ReactNodenullOptional help section for the Modal Header
isOpenbooleanfalseFlag to show the modal
onClose() => void() => undefined as anyA callback for when the close button is clicked
ouiaSafeNo type infotrue
positionliteralAlternate position of the modal
positionOffsetstringOffset from alternate position. Can be any valid CSS length/percentage
showClosebooleantrueFlag to show the close button in the header area of the modal
titlestring''Simple text content of the Modal Header, also used for aria-label on the body
titleIconVariant'success' | 'danger' | 'warning' | 'info' | 'default' | React.ComponentType<any>nullOptional 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
titleLabelstring''Optional title label text for screen readers
variant'small' | 'medium' | 'large' | 'default''default'Variant of the modal
widthnumber | string-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