Patternfly Logo

Examples

Basic

With description

Top aligned

Small

Medium

Large

Width

No header

With wizard

With dropdown

Props

Modal properties
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
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
variant'small' | 'medium' | 'large' | 'default'No'default'Variant of the modal
widthnumber | stringNoDefault width of the Modal.
ModalBox properties
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 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
ModalContent properties
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
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
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 + 0.25rem - 0.375rem + 0.0625rem)
.pf-c-modal-box--pf-c-modal-box--c-button--Right
1rem
.pf-c-modal-box--pf-c-modal-box--c-button--sibling--MarginRight
2rem
.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