Anatomy
|
Item |
Name |
Description |
Optional |
|---|---|---|---|
|
1 |
Dialog |
Dialog container. |
|
|
2 |
Header |
Displays a title and the close button. |
|
|
3 |
Content |
The main information about the task or message. It can display text or other helpful components. |
|
|
4 |
Footer |
A slot reserved for actions to complete the Dialog's task, such as confirming or canceling. |
Yes |
|
5 |
Close |
The button that allows users to close the Dialog without submitting any data. |
|
|
6 |
Overlay |
A screen overlay that enhances the user's attention to the Dialog by reducing the visibility of the main page content behind it. |
Yes |
Specification and properties
Variants
Dialogs come in two variants: modal and non-modal.
|
Variant |
Description |
|---|---|
|
Modal |
It directs the user's attention exclusively to a specific task or relevant information. While active, the modal Dialog overlays the content of the main page. |
|
Non-modal |
The user can view and interact with the main content while the Dialog remains open. It is often used to present non-critical information or provide optional tasks. |
Sizing
The Dialog component offers three width options: Small, Medium, and Large. When choosing which one to use in your designs, consider the option that best accommodates your content.
On mobile devices, the width dynamically adjusts to the screen size, maintaining a consistent spacing.200 (16px) side margin.
|
Item |
Size |
Value |
|---|---|---|
|
1 |
Small |
468px |
|
2 |
Medium |
698px |
|
3 |
Large |
928px |
|
4 |
Mobile |
100% |
The Dialog's height dynamically adapts based on the content, ensuring an optimal presentation.
Spacing
We maintain visual consistency across our product by following a uniform spacing pattern for all overlays. The foundational spacing between components is spacing.300 (24px).
When creating content inside a slot, we advise using the default size Medium of our components (e.g., Buttons and Inputs) and spacing.300 (24px) gap between these elements.
|
Property |
Value |
Token |
|---|---|---|
|
Padding |
24px |
spacing.300 |
|
Gap |
24px |
spacing.300 |
|
Side margin (Mobile only) |
16px |
spacing.200 |
Footer
The footer is an optional element reserved for actions related to the Drawer, such as confirming or canceling an action. By default, the footer contains two slots, which can be populated with any content.
To help create these actions, we offer usage suggestions based on our button hierarchy and order.
