Modal

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

Modal

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

View component via PatternFly Elements

Modals can be used in the light theme only. There are two modal variants that feature different styles, depending what’s 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

Content

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’s 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 can’t 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.

Size

Container heights and widths will shift responsively depending on the screen size and the amount of content that’s 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're placed inline with other elements whereas a video player modal features one large video only.


Don’t use other components inside of a content modal container unless absolutely necessary.

Modal content issue

Don’t display a video alone in a content modal, use a video player modal instead.

Modal information issue

Don’t omit the close button from either modal variant, it’s needed for accessibility.

Modal close missing issue

Accessibility

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 shouldn’t 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 shouldn’t close on its own.

Overlay

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.

Desktop

Modal desktop scale
Modal desktop scale for video modal

Tablet

Modal tablet scale
Modal tablet video scale

Mobile

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.

Desktop

spacing for modal
spacing for modal for video

Mobile

spacing for modal on mobile

For feedback and bug reports, create an issue in our GitHub repository.