All modals should have:
A header containingModals should be movable, allowing the user to reposition them.
When a modal display, focus should be on …
Modal layout
All modals should be formed of three sections:
header
body
footer
Header
The header shouldcontain
A close "X" icon button on the left.
A title, centered horizontally and vertically within the header area.
Guidelines
Add guidelines for header text.
Body
A The body containing should the main content, comprised of text, form elements, or a mixture of both.
Add guidelines for modal text.
Add guidelines for form elements.
Footer
A The footer containing should contain action buttons and/or links.
...
When a "Cancel" button is needed, it :
It should always be positioned far left
...
It should use secondary button styling
The primary action button should always be positioned far right.
Button labels should be in sentence case e.g. "Import file".Modals should be movable, allowing the user to reposition them
Validation
When a modal allows the user to enter data via form elements, sometimes it will be necessary to validate the data provided to ensure it is fit for purpose. The guidelines for validation should be followed.