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.

 

 

Modal01
Best practices
Modal03DO

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

Modal03DONT

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

Modal04DO

Clicking outside of the modal should close it.

Modal04DONT

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.

Modal02
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