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.
View a live version of this component and see how it can be customized.
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.
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.
A video player modal showcases a video at a large size for easy viewing. It includes a video, playback controls, and a close button.
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.
Container heights and widths will shift responsively depending on the screen size and the amount of content that’s included.
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.
Don’t display a video alone in a content modal, use a video player modal instead.
Don’t omit the close button from either modal variant, it’s needed for accessibility.
Modals cover the entire page and browser window, so the ability to dismiss them quickly and easily with any input is required.
|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.|
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.
A user can click on or tap anywhere in the background overlay to dismiss a modal.
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.
Both modal variants occupy eight columns on large screens and span the entire browser window on small screens.
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.
For feedback and bug reports, create an issue in our GitHub repository.