Red Hat design system

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.

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.

Best Practices

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

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

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

Behavior

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.

Interaction states

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

Dialog