(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Dialog

A dialog is a interaction between the system and the user. It is prompted when the system needs input from the user or to give the user urgent information concerning their current workflow. There are two types of dialogs, modal and dialog.

Dialogs work best when used for short tasks or to direct the user to task-relevant information. dialogs are useful in many scenarios; they are less confusing than navigating a user to a new page for simple tasks or to gather knowledge. However, dialogs are annoying and can distract the user. Use them only for the most necessary interactions.

A dialog is triggered by an action of the user, appears above the main content of the page and remains until it is closed. The purpose of a dialog should be immediately apparent to the user, with a clear and obvious path to completion.

Dialogs or modules always have an overlay. The overlay has the same colour as the BG of the dashboard, but only in 70% transparency. The entire background behind the dialog or modal is 15% blurred. The header of the dashboard is always excluded.

Variations

There are three types of dialogs

Anatomy

Modal

• 01 - Content area Here you can place all your content.
• 02 - Action area Here you can perform all the necessary actions. In modal it is not allowed to position actions to another place.

Basic Dialog

• 01 - Dialog title The title must be present in each dialog. all assets are set.
• 02 - Content area Here you can perform all the necessary content. In modal it is not allowed to position actions to another place.
• 03 - Action area Here you can perform all the necessary actions.

Process Dialog

• 01 - Dialog title The title must be present in each dialog. all assets are set.
• 02 - Content area Here you can perform all the necessary content. In modal it is not allowed to position actions to another place.
• 03 - Action Icons In the process dialog the action icons are always located in the sidebar
• 04 - Process area A process can be represented by different assets. these assets are always located in the process area.
• 05 - Action area Here you can perform all the necessary actions.