Dialogs

Introduction

In this guide, we delve into the art of crafting user interfaces that seamlessly integrate non-modal Side Panels & Filterbar alongside attention-commanding modal Dialogs & Floating Panel We will unravel the unique attributes, use cases, and design considerations that distinguish these two approaches, ultimately empowering you to make informed decisions and create captivating user interfaces that strike the perfect balance between functionality and visual aesthetics.


Dialog types

There are two types of dialogs, modal and non-modal

Modal

A modal dialog initiates a mode that directs the user's attention solely toward a specific task or pertinent information. While a modal dialog is active, the content of the underlying page is obscured and inaccessible until the user either completes the task or dismisses the modal.

Floating Panel

Floating Panel

Dialog

Dialog

Non-Modal

Conversely, with a non-modal dialog in use, users can seamlessly continue viewing and engaging with the main page while the dialog remains open. Non-modal dialogs are frequently employed to introduce non-essential information or offer optional user tasks.

 

Side Panel

Side Panel

Filterbar

Filterbar