Modal

Messages associated with one or more tasks that may require one or more choices for users.

Anatomy

Modal | Anatomy

The Mobile version is a little bit skinner:

Modal mobile | Anatomy
Margin

The modal appears over the entire screen content in a black shadow of 50% as shown below:

In some cases, it is possible to make a solution in which the modal content is more complex, requiring other user tasks, as in the example below:

Or even a complex information that users must confirm before next action.

Attention

The mobile version has some special rules that must be followed: place the modal with a maximum height of 80% of the height of the screen.

If more content is needed, roll vertically.

Scroll

Usage examples

Last updated

Was this helpful?