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.

 

Best practices

  • Never use full screen modal.
  • Always use the same space at the top and the bottom of a modal.
  • Clicking outside the modal should always close it.
  • Always use a darken overlay to make it more visible and give the impression to the user that he has to interact with the modal before doing something else.

 

You can see a desktop modal and a mobile modal.
Anatomy

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