Components
Modals
Documentation, examples, and uses for modal overlays
General Rules
- Modals should be dissmissable with the 'escape' key or clicking anywhere outside the modal
- Avoid unnecessary padding and margins - especially on mobile
- Modals should be used to help a user focus on a specific journey or help communicate an important message
- Modals should not be used excessively or for complex functions or user journeys
- Modals should not be used excessively or for complex functions or user journeys
Example modal
The modal is a flexible component and UI specifics can be based on the content and purpose of the modal. You can use a small or large headings, a seperate footer or no footer at all and the main body can include almost anything.
Please ensure the following:
- The modal padding remains constent (16px or 1rem)