Modal

Modal

Usage

Modal dialogs are simple forms that are triggered when the user performs an action on the main page. They appear overlaying the current screen, to inform the users about critical information, require them to make decisions or involve them in multiple tasks.

There are 2 different type of modals that can be used on the designer’s will: Standard modal and Modal with Illustration.

Standard Modal

The Standard Modal can be found in 2 different width sizes, to accommodate the designer’s needs.

The radius on Modals is 8px.

Modal with Illustration

The modal with illustration is normally used for final decisions, very important or danger messages, success feedbacks. Its use is recommended when the designer wants to add extra relevance to the message / action but it’s not mandatory.

Behaviour

• Modal dialog is always triggered by clicking some action on the page; it should appear on top of any other page content. Clicking outside of the modal will trigger no action.

• Modal dialog should always appear with a backdrop that disables interacting with page content, so that the full user’s focus is directed to the dialog content: #30353C (Grey D30) - Opacity 60%

• The modal closes when clicking on the X icon, or anywhere else outside the dialog box

• Every modal will always have a main action that goes together with a cancel option, except for those who are just showing a feedback message (such as the success one).

• The button placement inside the dialog box follows the regular pattern of the buttons in the application. Only for success modal, very often only with one CTA, the alignment of text and button can be in the middle. *

• The placement of the modal should always be centre aligned

Best Practices

• Use modal dialogs when user’s confirmation is needed for an action (for example when leaving the page without saving changes, or to confirm a disruptive action such as deleting an important item)

• Avoid using modals to display complex forms or data and use them sparingly: they are interruptive, as their goal is to focus the user attention. Size is determined on a per product basis.

• Make sure to always state clearly the actions that the user can perform

• Modal placement should be in the centre of the screen. When modal is bigger than the screen it should have a minimum of 80px offset from the top and be centrally aligned.

States

Both Standard and Modal with Illustration can be used in 3 states: