Modal

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

Examples Props CSS Variables

Examples

Basic

With description

Small

Large

Width

Custom header and footer

No header

Props

Modal properties
Name	Type	Required	Default	Description
children	React.ReactNode	Yes		Content rendered inside the Modal.
className	string	No	''	Additional classes added to the Modal
isOpen	boolean	No	false	Flag to show the modal
header	React.ReactNode	No		Complex header (more than just text), supersedes title for header content
title	string	Yes		Simple text content of the Modal Header, also used for aria-label on the body
hideTitle	boolean	No	false	Flag to hide the title
showClose	boolean	No	true	Flag to show the close button in the header area of the modal
modalContentAriaDescribedById	string	No	''	Id to use for Modal Box descriptor
footer	React.ReactNode	No		Custom footer
actions	any	No	[]	Action buttons to add to the standard Modal Footer, ignored if `footer` is given
onClose	() => void	No	() => undefined as any	A callback for when the close button is clicked
width	number \| string	No		Default width of the Modal.
appendTo	HTMLElement \| (() => HTMLElement)	No	(typeof document !== 'undefined' && document.body) \|\| null	The parent container to append the modal to. Defaults to document.body
disableFocusTrap	boolean	No		Flag to disable focus trap
description	React.ReactNode	No		Description of the modal
variant	'small' \| 'large' \| 'default'	No	'default'	Variant of the modal

ModalBox properties
Name	Type	Required	Default	Description
children	React.ReactNode	Yes		Content rendered inside the ModalBox.
className	string	No	''	Additional classes added to the ModalBox
variant	'small' \| 'large' \| 'default'	No	'default'	Variant of the modal
title	string	Yes		String to use for Modal Box aria-label
id	string	Yes		Id to use for Modal Box description

ModalBoxBody properties
Name	Type	Required	Default	Description
children	React.ReactNode	No	null	Content rendered inside the ModalBoxBody
className	string	No	''	Additional classes added to the ModalBoxBody

ModalBoxCloseButton properties
Name	Type	Required	Default	Description
className	string	No	''	Additional classes added to the close button
onClose	() => void	No	() => undefined as any	A callback for when the close button is clicked

ModalBoxFooter properties
Name	Type	Required	Default	Description
children	React.ReactNode	No	null	Content rendered inside the Footer
className	string	No	''	Additional classes added to the Footer

ModalBoxHeader properties
Name	Type	Required	Default	Description
children	React.ReactNode	No	null	Content rendered inside the Header
className	string	No	''	Additional classes added to the button
hideTitle	boolean	No	false	Flag to hide the title
headingLevel	'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'	No	'h1'	The heading level to use

ModalContent properties
Name	Type	Required	Default	Description
children	React.ReactNode	Yes		Content rendered inside the Modal.
className	string	No	''	Additional classes added to the button
variant	'small' \| 'large' \| 'default'	No	'default'	Variant of the modal
isOpen	boolean	No	false	Flag to show the modal
header	React.ReactNode	No	null	Complex header (more than just text), supersedes title for header content
description	React.ReactNode	No	null	Description of the modal
title	string	Yes		Simple text content of the Modal Header, also used for aria-label on the body
hideTitle	boolean	No	false	Flag to show the title (ignored for custom headers)
showClose	boolean	No	true	Flag to show the close button in the header area of the modal
width	number \| string	No	-1	Default width of the content.
footer	React.ReactNode	No	null	Custom footer
actions	any	No	[]	Action buttons to add to the standard Modal Footer, ignored if `footer` is given
onClose	() => void	No	() => undefined as any	A callback for when the close button is clicked
modalBoxAriaDescribedById	string	No	''	Id to use for Modal Box descriptor
id	string	No	''	Id of the ModalBoxBody
disableFocusTrap	boolean	No	false	Flag to disable focus trap

CSS Variables


	.pf-c-modal-box	--pf-c-modal-box--BackgroundColor	#fff
--pf-c-modal-box--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #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--BoxShadow --pf-global--BoxShadow--xl $pf-global--BoxShadow--xl 0 pf-size-prem(16px) pf-size-prem(32px) 0 rgba($pf-color-black-1000, .16), 0 0 pf-size-prem(8px) 0 rgba($pf-color-black-1000, .1) 0 pf-size-prem(16px) pf-size-prem(32px) 0 rgba(#030303, .16), 0 0 pf-size-prem(8px) 0 rgba(#030303, .1) 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--ZIndex --pf-global--ZIndex--xl $pf-global--ZIndex--xl 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--MaxWidth calc(100% - --pf-global--spacer--xl) calc(100% - $pf-global--spacer--xl) calc(100% - pf-size-prem(32px)) 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-lg--lg--MaxWidth	70rem
	.pf-c-modal-box	--pf-c-modal-box--MaxHeight	calc(100% - 3rem)
--pf-c-modal-box--MaxHeight calc(100% - --pf-global--spacer--2xl) calc(100% - $pf-global--spacer--2xl) calc(100% - pf-size-prem(48px)) calc(100% - 3rem)
	.pf-c-modal-box	--pf-c-modal-box__title--LineHeight	1.3
--pf-c-modal-box__title--LineHeight --pf-global--LineHeight--sm $pf-global--LineHeight--sm 1.3
	.pf-c-modal-box	--pf-c-modal-box__title--FontSize	1.5rem
--pf-c-modal-box__title--FontSize --pf-global--FontSize--2xl $pf-global--FontSize--2xl pf-font-prem(24px) 1.5rem
	.pf-c-modal-box	--pf-c-modal-box__title--PaddingTop	1.5rem
--pf-c-modal-box__title--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-modal-box	--pf-c-modal-box__title--PaddingRight	1.5rem
--pf-c-modal-box__title--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-modal-box	--pf-c-modal-box__title--PaddingLeft	1.5rem
--pf-c-modal-box__title--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-modal-box	--pf-c-modal-box__title--last-child--PaddingBottom	1.5rem
--pf-c-modal-box__title--last-child--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-modal-box	--pf-c-modal-box__description--PaddingTop	0.25rem
--pf-c-modal-box__description--PaddingTop --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-modal-box	--pf-c-modal-box__description--PaddingRight	1.5rem
--pf-c-modal-box__description--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-modal-box	--pf-c-modal-box__description--PaddingLeft	1.5rem
--pf-c-modal-box__description--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-modal-box	--pf-c-modal-box__description--last-child--PaddingBottom	1.5rem
--pf-c-modal-box__description--last-child--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-modal-box	--pf-c-modal-box__body--MinHeight	calc(1rem * 1.5)
--pf-c-modal-box__body--MinHeight calc(--pf-global--FontSize--md * --pf-global--LineHeight--md) calc($pf-global--FontSize--md * $pf-global--LineHeight--md) calc(pf-font-prem(16px) * 1.5) calc(1rem * 1.5)
	.pf-c-modal-box	--pf-c-modal-box__body--PaddingTop	1.5rem
--pf-c-modal-box__body--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-modal-box	--pf-c-modal-box__body--PaddingRight	1.5rem
--pf-c-modal-box__body--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-modal-box	--pf-c-modal-box__body--PaddingLeft	1.5rem
--pf-c-modal-box__body--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-modal-box	--pf-c-modal-box__body--last-child--PaddingBottom	1.5rem
--pf-c-modal-box__body--last-child--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-modal-box	--pf-c-modal-box__title--body--PaddingTop	1rem
--pf-c-modal-box__title--body--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-modal-box	--pf-c-modal-box__description--body--PaddingTop	1rem
--pf-c-modal-box__description--body--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-modal-box	--pf-c-modal-box--c-button--Top	calc(1.5rem - 0.375rem + 0.0625rem)
--pf-c-modal-box--c-button--Top calc(--pf-global--spacer--lg - --pf-global--spacer--form-element + 0.0625rem) calc($pf-global--spacer--lg - $pf-global--spacer--form-element + 0.0625rem) calc(pf-size-prem(24px) - pf-size-prem(6px) + 0.0625rem) calc(1.5rem - 0.375rem + 0.0625rem)
	.pf-c-modal-box	--pf-c-modal-box--c-button--Right	1rem
--pf-c-modal-box--c-button--Right --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-modal-box	--pf-c-modal-box--c-button--sibling--MarginRight	2rem
--pf-c-modal-box--c-button--sibling--MarginRight --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-modal-box	--pf-c-modal-box__footer--PaddingTop	1.5rem
--pf-c-modal-box__footer--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-modal-box	--pf-c-modal-box__footer--PaddingRight	1.5rem
--pf-c-modal-box__footer--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-modal-box	--pf-c-modal-box__footer--PaddingBottom	1.5rem
--pf-c-modal-box__footer--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-modal-box	--pf-c-modal-box__footer--PaddingLeft	1.5rem
--pf-c-modal-box__footer--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-modal-box	--pf-c-modal-box__footer--c-button--MarginRight	1rem
--pf-c-modal-box__footer--c-button--MarginRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-modal-box	--pf-c-modal-box__footer--c-button--sm--MarginRight	calc(1rem / 2)
--pf-c-modal-box__footer--c-button--sm--MarginRight calc(--pf-c-modal-box__footer--c-button--MarginRight / 2) calc(--pf-global--spacer--md / 2) calc($pf-global--spacer--md / 2) calc(pf-size-prem(16px) / 2) calc(1rem / 2)
	.pf-c-modal-box__title + .pf-c-modal-box__body	--pf-c-modal-box__body--PaddingTop	1rem
--pf-c-modal-box__body--PaddingTop --pf-c-modal-box__title--body--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-modal-box__description + .pf-c-modal-box__body	--pf-c-modal-box__body--PaddingTop	1rem
--pf-c-modal-box__body--PaddingTop --pf-c-modal-box__description--body--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem