Modals
Modals
Modals
Modals
Foundations
Colors
Iconography
Grid + Spacing
Responsive
Shadows
Typography
Layout
Modals
Modals / Confirmation
Panels
Tabs
Actions & Inputs
Buttons
Checkboxs
Dropdowns
Forms
Links
Radio Buttons
Selects
Text Fields
Status & Feedback
Badges
Progress Indicators
Tooltips
A modal appears as a layer on top of the primary interface. Modals disrupt users from interacting with the page until they complete a specific task.
◢
Overview
Modals should be used sparingly.
Modals should be clear and direct. Limit verbiage and information.
Modals should only have one level of save heirarchy
(if multiple levels are required, consider another pattern).
Modals should be used to complete one task.
Avoid the need for lateral navigation within Modals (ie. tabs).
Scrollbars are permissible, but not ideal. Limit usage to instances where user generated content (UGC) pushes content below fold.
USE CASES:
While creating a new product, a user wishes to upload images of their product. This is a subtask that is part of a larger task flow.
A user wishes to alter the theme code in store design. A modal provides the “child” experience of editing code within the “parent” experience of updating the theme.
A modal appears as a layer on top of the primary interface. Modals disrupt users from interacting with the page until they complete a specific task.
◢
Overview
Modals should be used sparingly.
Modals should be clear and direct. Limit verbiage and information.
Modals should only have one level of save heirarchy.
(if multiple levels are required, consider another pattern)
Modals should be used to complete one task.
Avoid the need for lateral navigation within Modals. (ie. tabs)
Scrollbars are permissible, but not ideal. Limit usage to instances where user generated content (UGC) pushes content below fold.
USE CASES:
While creating a new product, a user wishes to upload images of their product. This is a subtask that is part of a larger task flow.
A user wishes to alter the theme code in store design. A modal provides the “child” experience of editing code within the “parent” experience of updating the theme.
Anatomy
1. Overlay
Prevents user from interacting with parent experience.
2. Container
The container houses the content of the modal.
3. Header Text
Describes the intention of the modal.
4. Content
Content can refer to text, inputs etc. Whatever interactions are required to complete the task.
5. Actions
Buttons with descriptions allowing the user to move forward or backward from this experience.
Responsive
Desktop and Tablet
An example of a Desktop Modal.
Mobile
An example of a Mobile Modal.
Notes + Specifications
Notes + Specifications
–————
Desktop & Tablet
Size: 720px wide, 664px max height*
Corner Radius: 4px
Padding: 24px
Shadow: Raised
Background: Grey 70, 70% opacity
* Initial height, can expand to house user generated content.
–————
Mobile
Size: Full width
Corner Radius: 4px
Padding: 24px
Shadow: Raised
Background: Grey 70, 70% opacity
–————
Actions
Actions are anchored to the bottom
right corner of Models.
Clicking/tapping the background does NOT dismiss modal.
ESC dismisses modal
