Modals display information in a window or help a user focus on a task without navigating them away from the page. A user cannot perform other actions until the modal is dismissed.


View a live version of this component and see how it can be customized.

View the PatternFly Elements component

Modals can be used in the light theme only. There are two modal variants that feature different styles, depending on what is being presented to a user. Modals include a content container or a video player and are placed in the center of a background overlay that covers the entire browser window.

Modal style
Modal style for video


A content modal can include different kinds of information and interactive elements. A basic content modal should include at least a headline, content, a button or a call to action, and a close button.

Modal style content

Video player

A video player modal showcases a video at a large size for easy viewing. It includes a video, playback controls, and a close button.

Modal style video player

Background overlay

The background overlay is a black solid with opacity that is positioned under a modal container. It eliminates distractions and helps a user focus on the content in the modal.

Modals can be used when critical information requires immediate user attention or for hiding extra content that cannot be displayed due to layout constraints. Modals interrupt user workflows or hide secondary content by design, but should be used sparingly to limit user disruption.


Container heights and widths will shift responsively depending on the screen size and the amount of content that is included.

Modal size
Modal size mobile

Content vs. video

Modals can either organize content that a user can interact with or they can display a large video that a user can watch. A content modal can include smaller videos if they are placed inline with other elements whereas a video player modal features one large video only.

Do not use other components inside of a content modal container unless absolutely necessary.

Modal content issue

Do not display a video alone in a content modal, use a video player modal instead.

Modal information issue

Do not omit the close button from either modal variant, it is needed for accessibility.

Modal close missing issue


Modals cover the entire page and browser window, so the ability to dismiss them quickly and easily with any input is required.

Key Interaction
Space or Enter (if the modal trigger is focused) Triggers a modal.
Space or Enter (if the modal is displayed) Triggers the focused interactive element or dismisses the modal if the close button is still focused.
Tab (if the modal is open) Focuses the next interactive element in the tab order until the close button is focused again, it should not leave the content modal container.
Esc Dismisses a modal without any further actions taking place.

Close button

Both modal variants require a close button which is the most direct way to dismiss a modal. A user needs to actively dismiss a modal, it should not close on its own.


A user can click on or tap anywhere in the background overlay to dismiss a modal.

Tab order

The close button is focused when a modal appears and is therefore always the first interactive element in the tab order. When the Tab key is pressed repeatedly, the focus indicator moves off of the close button and any interactive elements below it are added to the tab order.

Modal tab order

Both modal variants occupy eight columns on large screens and span the entire browser window on small screens.


Modal desktop scale
Modal desktop scale for video modal


Modal tablet scale
Modal tablet video scale


Modal mobile scale

The interaction states in the content modal and the video player modal are slightly different.

Both modal variants use PatternFly 4 spacers to define spacing values between elements.


spacing for modal
spacing for modal for video


spacing for modal on mobile

To give feedback about anything on this page, contact us.

To learn how to use our other components in your designs, visit the Components section.