Modal

Modal helps to focus the user’s attention on one task or piece of information via a window that sits on top of the page content.

Dimensions

Modal's default width is defined by design as 420px (increased by 30px). The height of the modal depends on the volume of content and it's up to 80% of the viewport.

All elements, eg. buttons, inputs, selects, etc., in a modal are always in medium size.

Confirmation modal

Confirmation modal

Informative modal

Informative modal

Advanced modal

Advanced modal

 

Advanced modal header

The header area always contains a title, and it can be supplemented by tabs, select, input, or another component.

Default header

Default header

Header with search

Header with search

Header with tabs

Header with tabs

Header with search and tabs

Header with search and tabs

Header with filter and search

Header with filter and search

Header with filters, search, and tabs

Header with filters, search, and tabs

 

Close button states

DP - Close button states