Dialog

Dialogs 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 dialog is dismissed.

Dialog
Component name Not coded yet Studio repo PFE repo Drupal/FTS repo Adobe Target repo Other repo Row last updated Notes/pattern/usage Component doc
Dialog x 6/10/20
Last updated: 6/10/2020

Standard modal dialog

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Learn more
View Code
<rh-dialog slot="footer" trigger="standard-trigger">
<h2 slot="header">Modal dialog with a header</h2>
<p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.</p>
<pfe-cta>
<a href="#bar">Learn more</a>
</pfe-cta>
</rh-dialog>
<pfe-cta id="standard-trigger">
<button id="first-dialog">Open modal dialog</button>
</pfe-cta>

Video modal dialog

View Code
<rh-dialog id="video-modal" type="video" trigger="video-trigger">
<iframe src="https://www.youtube.com/embed/aqz-KE-bpKQ?enablejsapi=1" title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</rh-dialog>
<pfe-cta id="video-trigger" slot="footer">
<button>Open video modal dialog</button>
</pfe-cta>

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

Dialog style
Dialog style for video

Content

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

Dialog style content

Video player

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

Dialog style video player

Background overlay

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


Dialogs can be used when critical information requires immediate user attention or for hiding extra content that cannot be displayed due to layout constraints. Dialogs 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 is included.

Dialog size

Dialog size mobile

Content vs. video

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


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

Dialog content issue

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

Dialog information issue

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

Dialog close missing issue

Accessibility

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

Key State Interaction
Space or Enter Trigger is focused Shows the modal dialog.
Space or Enter Dialog is shown Triggers the focused interactive element or dismisses the dialog if the close button is focused.
Tab Dialog is shown Focuses the next interactive element in the tab order until the close button is focused again. Focus may not leave the dialog container.
Esc Dialog is shown Dismisses a dialog without any further actions taking place.

Close button

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

Overlay

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

Tab order

The close button is focused when a dialog 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.

Dialog tab order

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

Desktop

Dialog desktop scale

Dialog desktop scale for video dialog

Tablet

Dialog tablet scale

Dialog tablet video scale

Mobile

Dialog mobile scale

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


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

Desktop

spacing for dialog

spacing for dialog for video

Mobile

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.