Dialog

A dialog component, similar to a modal, is an overlay element designed to capture user attention for tasks like confirmations, prompts, or additional information. It appears on top of the main content, requiring user interaction to proceed.

1. Default

By default, the Dialog does not implement any padding. This is a general rule followed by other components in the Mercury design system. To apoply padding, you can use any combination of the provided CSS classes designed for this purpose. Learn more about the spacing classes on the spacing documentation page . All the examples that follow display the Dialog with padding, by applying the .spacing-body class.

2. Without Padding

3. With Header

5. Resizable

resizable allows you to resize the dialog by dragging from the edges. You might want in this case to set maximum and minimum block and inline sizes. For this, the ch-dialog provides specific CSS custom properties that you should use:

--ch-dialog-max-block-size
--ch-dialog-max-inline-size
--ch-dialog-min-block-size
--ch-dialog-min-inline-size

6. Adjust Position

adjustPositionAfterResize will reposition the dialog after being resized. This property goes hand in hand with resizable

7. Allow Drag