Anatomy
|
Item |
Element |
Discription |
Component |
|---|---|---|---|
|
1 |
Header |
Includes a title, optional label, and the close icon. The title should be brief and clearly describe the dialogs’s task or purpose. Use the optional label above the title set the context for the information in the dialog. |
Tertiary Button |
|
2 |
Body |
Contains the information and/or controls needed to complete the dialog’s task. It can include message text and components. |
Slot Content Block variables by usage |
|
3 |
Actions |
Modal: The main actions needed to complete or cancel the dialog task. Button groupings change based on modal variant. Use descriptive words for the actions like Add, Delete, Save and avoid vague words like Done or OK. Non-Modal: |
Button Group |
|
4 |
Overlay |
For Modals only Screen overlay that obscures the on page content |
Overlay |
Good to know
In both our Modal and Non-Modal components, the body area is equipped with a slot component. This design choice offers enhanced flexibility, allowing customization to suit each UX flow requirement while maintaining consistency within the overarching structure.
Specifications & Properties
Types of Dialogs
Dialogs come in two varieties: modal and non-modal.
A modal dialog directs the user's attention exclusively to a specific task or relevant information. While active, the modal dialog overlays the content of the underlying page, becoming accessible once the user completes the task or dismisses the dialog.
On the other hand, a non-modal dialog allows the user to seamlessly continue viewing and interacting with the main page while the dialog remains open. Non-modal dialogs are often utilized to present non-critical information or provide optional user tasks.
|
|
Type |
Usage |
Content |
Component |
|---|---|---|---|---|
|
1 2 |
Non-Modal |
Use to present non-critical information or optional user tasks |
While the dialog remains open, users can still access and engage with on-page content |
Side Panel Filter Bar |
|
3 4 |
Modal |
Utilized for showcasing essential details or soliciting necessary input crucial for accomplishing a workflow. |
Concentrates the user's attention solely on a specific task or information, temporarily concealing on-page content while the modal dialog is active |
Dialog Floating Panel |
Size
The Dialog, Side and Floating panels are available in three different sizes: Small, Medium, and Large. Your choice of size should align with the content you intend to showcase within the panel. For optimal utilization of space within the main UI, it is advisable to opt for the Small or Medium panel sizes.
To effectively organize the content in Side and Floating panel, and ensure a user-friendly and space-efficient experience, you can implement components such as segmented controls, tabs, Stepper or accordions. These components facilitate content arrangement while maintaining seamless navigation and a streamlined user experience.
Spacing
Consistency in our product's appearance is maintained by adhering to a uniform spacing pattern for all modals. The foundational spacing between components is set at 24px.
When creating content inside of the slot we advice to use the default size M of our component e.g. Button and Inputs and spick to the 24px padding inbetween those elements.
