Modals - Confirmation
Modals - Confirmation
Modals - Confirmation
Modals - Confirmation
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 Confirmation Modal is a simplified version of a Modal. The purpose of a confirmation modal is to act as a safety net for a user attempting a destructive action.
◢
Overview
Confirmation modals should be used sparingly.
Confirmation modals should be clear and direct. Limit verbiage and information.
Confirmation modals should be used with destructive actions.
Confirmation modals should be used with actions that cannot be undone.
Confirmation modals can be used to bypass future routine confirmations.
Max word count 20 words.
USE CASES:
A user attempts to delete a product or similar destructive action.
A user attempts an action that will overwrite existing content.
A user attempts to uninstall a 3rd party app or 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 refers to text.
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.
An example of a Desktop Modal.
Mobile
An example of a Mobile Modal.
An example of a Mobile Modal.
Notes + Specifications
Notes + Specifications
–————
Desktop & Tablet
Size: 600px wide
Corner Radius: 4px
Padding: 24px
Shadow: Raised
Background: Grey 70, 70% opacity
–————
Mobile
Size: 90%
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
