Toggle theme

`modal`

To view each modal test, a button is located after each h2 heading that needs to be activated to display it.
Test 4 is intended for mouse users, but can be conducted by someone who doesn't use a mouse.
If possible, run through each test with each theme by toggling the theme switch.

Test 1. Modal scale

Small scale modal

Medium scale modal

Large scale modal

Test 2. Modal type

The "Delete" button is for visual purposes only, and is disabled.

To close the modal either:

Select the "Cancel" button via keyboard or mouse,
Use the "esc" key,
Select the close button via keyboard or mouse, or
Click outside the modal dialog window.

Cancel

Delete

Destructive modal

The "Save" button is for visual purposes only, and is disabled.

To close the modal either:

Select the "Cancel" button via keyboard or mouse,
Use the "esc" key,
Select the close button via keyboard or mouse, or
Click outside the modal dialog window.

Cancel

Save

Info modal

Test 3. Modal cannot close with escape key

The "Save" button is for visual purposes only, and is disabled.

To close the modal either:

Select the "Cancel" button via keyboard or mouse,
Select the close button via keyboard or mouse, or
Click outside the modal dialog window.

Cancel

Save

Modal cannot close with escape key

Test 4. [Intended for Mouse users] Modal cannot close when clicked outside of the modal dialog

The "Save" button is for visual purposes only, and is disabled.

To close the modal either:

Select the "Cancel" button via keyboard or mouse,
Select the close button via keyboard or mouse, or
Click outside the modal dialog window.

Cancel

Save

Modal cannot close when clicked outside of modal dialog

Test 5. Modal window size and features

The "Save" button is for visual purposes only, and is disabled.

To close the modal either:

Select the "Cancel" button via keyboard or mouse,
Use the "esc" key,
Select the close button via keyboard or mouse, or
Click outside the modal dialog window.

Cancel

Save

Full screen modal

For devices smaller than a tablet, this modal with "dock" to the bottom.

The "Save" button is for visual purposes only, and is disabled.

To close the modal either:

Select the "Cancel" button via keyboard or mouse,
Use the "esc" key,
Select the close button via keyboard or mouse, or
Click outside the modal dialog window.

Cancel

Save

Docked modal

The "Save" button is for visual purposes only, and is disabled.

To close the modal either:

Select the "Cancel" button via keyboard or mouse,
Use the "esc" key,
Select the close button via keyboard or mouse, or
Click outside the modal dialog window.

Cancel

Save

Custom width modal

The "Save" button is for visual purposes only, and is disabled.

To close the modal either:

Select the "Cancel" button via keyboard or mouse,
Use the "esc" key,
Select the close button via keyboard or mouse, or
Click outside the modal dialog window.

Cancel

Save

Grey background modal