- Modals can be built with different sizes and configurations to best fit the amount of content you have.
- We recommend that you do not use the full-width size, as it appears as though it's a completely new page. If you require this size, we recommend that you consider creating a new page instead of a modal.
- Modals belong to a screen, therefore a modal should not be triggered from another modal window (see the Modal over modal section below).
- When a modal has a footer, place the actions inside and align them to the left. Follow this order for your actions: Primary button (only one), secondary button, and button link.
Use it to draw the user's attention to something that is more important.
Do not use it for complex cases that require you to display a lot of information or to complete a long form. In these cases, use a new page instead.
Use it for simple content cases.
Try not to trigger a modal window from another modal window. Modal windows are subordinate to pages.
Use it if you need to interrupt the user flow to display concrete information or capture data from the user.
Never completely cover the page's information with the modal window.
Selection inside a modal
- Select multiple items by selecting the corresponding checkboxes and clicking the "Done" button.
- Individually select items with the corresponding radio button in the row. A modal footer and its actions are not required for individual selection.
Modal over modal
Modal over modal is a not desired situation. Please, try to solve this situation in another way, like using a full page or driving the process to the correct place. In case this happens, make sure to provide a good experience preventing first modal closing by accidental interaction (as an example).
Modals are always displayed at the center of the screen and can be configured with the sizes shown in the table below:
|Large||896px wide modal on screen sizes greater than 992px. 600px wide modal on screen sizes between 768px and 992px.|
|Full width||A modal that stretches to fit the browser window, with 45px padding on every side.|
- Modal header
- Close button
- Content: form, text, image...
- Modal buttons
Lexicon allows your modal window to have different configurations related to your needs. These needs vary from case to case and that is why not every modal in the system needs to be equal, but needs to follow certain rules.
Header, body and footer
This is the classic composition of a modal window with its three main parts: header, body, and footer.
Header and body
This configuration is used when you don't need a footer bar to place your icons.
Body and Footer
Use this configuration when you just need to show text and buttons to agree or cancel.
iframe in the body
You can of course add an iframe to a modal body at any time. See the iframe modal body Clay section for more information.
Modal overlay color
The modal overlay color is a main lighten 8% color with an alpha value of 0.8.
Modals for status messages
Modal headers can be configured to use modals as status messages. This solution is proposed to give more emphasis on blocking actions that the use must read and pay careful attention.
Never remove the icon in the title, as it provides the modal with a better user experience for accessibility.
Always use direct and concrete titles.
When a modal is viewed on a mobile device, its look and feel transforms to the one shown below to provide a mobile friendly user experience. The modal occupies the whole screen, drawing the user's attention.