PatternFly

Modal

A modal displays important information to a user without requiring them to navigate to a new page.

Info alert:Beta feature

This beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more about the process, visit our about page or our Beta components page on GitHub.

Examples

Basic modals

Basic modals give users the option to either confirm or cancel an action.

To flag an open modal, use the isOpen property. To execute a callback when a modal is closed, use the onClose property.

A modal must have a <ModalBody>, containing the main content of the modal. The <ModalHeader> and <ModalFooter> components are not required, but are typically used to display the modal title and any button actions, respectively.

Scrollable modals

To enable keyboard-accessible scrolling of a modal’s content, pass tabIndex={0} to the <ModalBody>.

With a static description

To provide additional information about a modal, use the description property. Descriptions are static and do not scroll with other modal content.

Top aligned

To override a modal's default center alignment, use the position property. In this example, position is set to "top", which moves the modal to the top of the screen.

To adjust the size of a modal, use the variant property. Modal variants include "small", "medium", "large", and "default".

In the following example, you can display each modal size option. To launch a modal with a specific size, first select the respective radio button, followed by the "Show modal" button.


Custom width

To choose a specific width for a modal, use the width property. The following example has a width of "50%".

Custom header

To add a custom header to a modal, your custom content must be passed as a child of the <ModalHeader> component. Do not pass the title property to <ModalHeader> when using a custom header.

To exclusively present information in a modal, remove the header and/or footer.

When a modal has no header or footer, make sure to add an aria-label explicitly stating this, so that those using assistive technologies can understand this context.

Title icon

To add an icon before a modal’s title, use the titleIconVariant property, which can be set to a "success", "danger", "warning", or "info" variant. The following example uses a "warning" variant.

Custom title icon

To add a custom icon before a modal’s title, set titleIconVariant to an imported custom icon. The following example imports and uses a bullhorn icon.

With wizard

To guide users through a series of steps in a modal, you can add a wizard to a modal. To configure the <Wizard>, pass an array that contains a “name” and “component” value for each step into the steps property.

With dropdown

To present a menu of actions or links to a user, you can add a dropdown to a modal.

To allow the dropdown to visually break out of the modal container, set the menuAppendTo property to “parent”. Handle the modal’s closing behavior by listening to the onEscapePress callback on the <Modal> component. This allows the "escape" key to collapse the dropdown without closing the entire modal.

With help

To help simplify and explain complex models, add a help popover. Only place a help icon at the modal level if its information applies to all content in the modal. If the help popover is specific to a particular modal section, place the help icon beside that section instead.

With form

To collect user input within a modal, you can add a form.

To enable form submission from a button in the modal's footer (outside of the <Form>), set the button's form property equal to the form's id.

Custom focus

To customize which element inside the modal receives focus when initially opened, use the elementToFocus property`.

Props

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeContent rendered inside the modal.
appendToHTMLElement | (() => HTMLElement)() => document.bodyThe parent container to append the modal to. Defaults to "document.body".
aria-describedbystringId to use for the modal box description. This should match the ModalHeader labelId or descriptorId.
aria-labelstringAdds an accessible name to the modal when there is no title in the ModalHeader.
aria-labelledbystringId to use for the modal box label. This should include the ModalHeader labelId.
classNamestringAdditional classes added to the modal.
disableFocusTrapbooleanFlag to disable focus trap.
elementToFocusHTMLElement | SVGElement | stringThe element to focus when the modal opens. By default the first focusable element will receive focus.
idstringAn id to use for the modal box container.
isOpenbooleanfalseFlag to show the modal.
maxWidthnumber | stringMaximum width of the modal.
onClose(event: KeyboardEvent | React.MouseEvent) => voidAdd callback for when the close button is clicked. This prop needs to be passed to render the close button
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.
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleantrueSet the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.
position'default' | 'top''default'Position of the modal. By default a modal will be positioned vertically and horizontally centered.
positionOffsetstringOffset from alternate position. Can be any valid CSS length/percentage.
variant'small' | 'medium' | 'large' | 'default''default'Variant of the modal.
widthnumber | stringDefault width of the modal.

ModalBody

Renders content in the body of the modal
*required
NameTypeDefaultDescription
aria-labelstringAccessible label applied to the modal body. This should be used to communicate important information about the modal body div element if needed, such as when it is scrollable.
childrenReact.ReactNodeContent rendered inside the modal body.
classNamestringAdditional classes added to the modal body.
rolestringAccessible role applied to the modal body. This will default to "region" if the aria-label property is passed in. Set to a more appropriate role as applicable based on the modal content and context.

ModalHeader

Renders content in the header of the modal
*required
NameTypeDefaultDescription
childrenReact.ReactNodeCustom content rendered inside the modal header. If children are supplied then the tile, tileIconVariant and titleScreenReaderText props are ignored.
classNamestringAdditional classes added to the modal header.
descriptionReact.ReactNodeDescription of the modal.
descriptorIdstringId of the modal description.
helpReact.ReactNodeOptional help section for the modal header.
labelIdstringId of the modal title.
titleReact.ReactNodeContent rendered inside the modal title.
titleIconVariant'success' | 'danger' | 'warning' | 'info' | 'custom' | React.ComponentType<any>Optional alert icon (or other) to show before the title. When the predefined alert types are used the default styling will be automatically applied.
titleScreenReaderTextstringOptional title label text for screen readers.

ModalFooter

Renders content in the footer of the modal
*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the modal footer.
classNamestringAdditional classes added to the modal footer.

CSS variables

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

View source on GitHub