Dialog

Overview Style Guidelines Code Demos Accessibility

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

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.