Modal

Modals 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:

1. header

2. body

3. footer

Header

The header should contain

• A close "X" icon button on the left.

• A title, centered horizontally and vertically within the header area.

Add guidelines for header text.

Body

The body 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

The footer should contain action buttons and/or links.

• At least one button should be presented.

When a "Cancel" button is needed:

• 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".

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.