Modals are components which interrupt a user flow by focusing on a defined area of the screen. They are typically reserved for critical junctions in a user journey.
Modal sizes
Use the appropriate modal size to suit your content. A modal will always responsively, re-size itself to fit the view port it appears in. Select from the buttons below to view the modals.
Modal variations
Modals are configurable. Choose how they are dismissed, whether they have a footer, or what the footer contains. Modals can house whatever content you require of them, allowing you to define your experience. Make sure you always provide a clear way forward. Select from the buttons below to view the modals.
User experience
A modal is useful for bringing information to the attention of a user and are best used for short decision making moments. As they can greatly disrupt the task or goal the user is attempting to complete, ensure modals are used sparingly and with good reason. Ensure calls to action are clear and users can escape the modal either by tapping or selecting outside the modal area by an obvious crosshair, and/or a close or cancel button.
Visual design
The modal is a generic component designed to work in as many scenarios as possible. It can be configured to accommodate most functional requirements.
Dos and don’ts
- Avoid changing the styles of the modal.
- Avoid adding too much text or functionality into the modal.
- Do use the native operating system modal if required.
Where is this available?
The GEL design System will always have the latest component versions and additions, however new components and changes to existing components may roll out to other platforms at different times.
| Platform | Status |
|---|---|
| GEL Design System | Available |
| Mesh UI | Older version available |
| Legacy WDP | Older version available |