Dialog
On this page
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
Color scheme
Dialog is available for both light and dark color schemes.
Light color scheme
Dark color scheme
If a dialog element is a child of a dark scheme element, but the page as a whole uses the light scheme, the dialog should match the page scheme.
<body>
<rh-surface color-palette="darkest"
role="main">
... dark content
<rh-card color-palette="lightest">
... light content
</rh-card>
<rh-dialog>
This dialog inherits its color scheme from the main element.
</rh-dialog>
</rh-surface>
</body>Place dialog elements in the root themable container to ensure they match the overall page color scheme.
<body style="color-scheme: dark only">
<main>
... dark content
<rh-card color-palette="lightest">
... light content
<rh-dialog>
Even though the whole page uses the dark color scheme,
this dialog will always use the light color scheme,
since it's a child of a themable container with the lightest
color palette.
</rh-dialog>
</rh-card>
</main>
</body>Avoid placing dialogs in themable containers which don't match the page scheme
Space
The amount of space in a dialog reduces as breakpoints get smaller.
Large breakpoints
Small breakpoints
Example
Token
Description
md
8px spacer
lg
16px spacer
xl
24px spacer
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.
Hover
Focus
Active
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
