In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

Modal

A modal is a layer above all content, requesting information or an additional action.

General guidelines

Modals should be used to provide specific information that is critical to continue a process. Use of modal moves the interface into a temporary mode requiring a user’s action.

The modal should be always displayed on top of every other component as the need is to disable the main content behind, emphasizing this temporary mode. Somehow forcing the user to focus on the modal content.

Modal can be used when fragmenting a complex workflow into simpler steps.

Use modals when preventing the user of a critical action.

 

 

You can see a desktop modal and a mobile modal.
Best practices
Good practice about the use of a modal in context.

Always use a darken overlay and the same space at the top and the bottom of a modal.

Bad practice about the use of a modal in context.

Don’t let the user feel he can interact with the actions in the background.

Good practice about the use of a modal in context.

Clicking outside of the modal should close it.

Bad practice about the use of a modal in context.

Never use full screen modal.

Visual guidelines

Modal examples can vary depending on your user’s needs, but should always at least encapsulate a title and a cross to close it.

Context and need can vary and modal can encapsulate a number of elements, such as text inputs, links, buttons, steppers, texts, etc. For more detailed information on the construction of these atomic elements, please consult the corresponding pages.

You can see a modal with a form.
Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top