Modals and popups

Introduction

Modals and pop-ups appear above the content to display new information and often cause an interruption for the user.
Thus the use of modals and pop-ups should be reserved for only most important notifications, confirmations or alerts. As even most precarious use of modals and pop-ups are nevertheless interruptions, one should always first attempt to design a solution that could avoid the use of modals and pop-ups by avoiding error states and carefully examining whether the new information is truly critical.

Modals and pop-ups can have primary and secondary actions and descriptions. Modals and pop-ups should be dismissable in multiple ways, for example esc keyboard shortcut, close button in top corner and also clicking outside modal to close it should be possible unless interaction from user is explicitly required to proceed. Modals should be presented centered on the view and fit to content.

 

Modals

 

Tooltips

 

Pop-ups