Red Hat design system

Style

A dialog is a floating container on top of a transparent backdrop. The container requires a backdrop so it can separate itself from the page underneath, this helps users focus on the dialog content.

Anatomy

Backdrop
Container
Close button
Header section
Body text section
Footer section
Container shadow

Theme

A dialog is available in the light theme only.

Configuration

The dialog container does not have a maximum height, but too much content in the body text section will cause scrolling.

How a dialog container is constructed showing border radius, region, and scrolling details

Space

The amount of space in a dialog reduces as breakpoints get smaller.

Large breakpoints

A dialog container on a large breakpoint with spacing between all elements

Small breakpoints

A dialog container on a small breakpoint with spacing between all elements


Example	Token	Description
`8`	--rh-space-md	8px spacer
`16`	--rh-space-lg	16px spacer
`24`	--rh-space-xl	24px spacer
`32`	--rh-space-2xl	32px spacer

Interaction states

Interactive elements may be added to a dialog container, but very sparingly. If interactive elements are added, go to their element or pattern pages to view the interaction states.