#Overview
A dialog interrupts the user flow by displaying content in a layer above the page.
All dialogs can be used as modal or non-modal. A modal dialog disables the page content behind it and dims it with a dark backdrop to surface its content. A non-modal dialog allows someone to continue interacting with the page content behind the dialog.
- Modal dialog
- Non-modal dialog
#When to use
- To confirm user decisions
- For creation or editing of a record
- To capture a user's full attention for something important
- To display additional content, without leaving the page
#When not to use
- On top of another dialog
- When you want to avoid interrupting the user flow – decide based on your content and user flow if it makes more sense to use a new page instead of a dialog
#Anatomy
- Container
- Header (see Variations for a header with back button)
- Label (mandatory)
- Icon button: Closes the dialog. Clicking/tapping outside of the dialog or pressing the Esc key on the keyboard, also closes the dialog.
- Body: Supports any content, including titles, text, forms, images and carousels.
#Color
- Galaxus
- Digitec
#Spacing
- Mobile
- Desktop
#Best practices
#Use sparingly
Do
Modal dialogs interrupt the user flow and should be used sparingly.
Don't
Do not stack dialogs.
#Write clear copy
Do
Copy for actions in the dialog should always relate to the content or title.
Don't
Don’t use vague copy for content or actions. The user should understand what their decision triggers.
#Right-align actions on desktop
Do
Buttons are right-aligned in dialogs on desktop. Primary is positioned first.
Don't
Do not align buttons on the left.
#Use the specified sizes
Do
Use the correct sizes on desktop: Medium = 560px, Large = max width 1200px.
Don't
Do not use a smaller size on desktop.
#Placement
#Mobile
Dialogs on mobile appear from the bottom. The size is defined by the content height and the content is scrollable.
- Smaller dialog defined by content height
- Maximum height: 80px space on top
#Desktop
The medium-sized dialog is centre-aligned with a width of 560px.
When the dialog reaches its maximum height, there is 40px space on top.
The large-sized dialog is centre-aligned with a responsive width of 560px and above. The max width is 1200px with 40px space on left and right.
#Variations
#Mobile
Left: Mobile basic dialog
Middle: Mobile steps dialog
Right: Mobile full-screen dialog
The Galaxus Assistant is a unique example of a full-screen dialog with steps.
#Desktop
A desktop dialog without a sticky header or footer uses the viewport scrollbar.
A desktop dialog with a sticky header and footer uses an inline scrollbar.
A full-screen dialog is used without a header for the product image carousel.
#Behavior
#Appearing on mobile
The dark backdrop enters using Linear (no easing) with opacity. The mobile dialog enters at the same time but it is always at 100% opacity, giving the impression that it is hiding off the edge of the screen before being triggered.
The dialog starts from the bottom of the screen and moves upwards into full view using Entry easing.
#Disappearing on mobile
The dialog exits first by moving downwards using Slide Down easing. Shortly before the dialog completes its exit, the dark backdrop disappears using Linear (no easing) with opacity.
#Appearing on desktop
The dark backdrop enters first using Linear (no easing) with opacity.
The dialog enters after the backdrop using Linear (no easing) with opacity, and simultaneously moves upwards by 20px using Entry easing. This upwards movement adds visual interest and follows our motion principle “Playful”.
The duration for the Entry is shorter for a medium desktop dialog (560px width) and longer for a large desktop dialog (max width 1200px).
#Disappearing on desktop
The dark backdrop and dialog exit simultaneously using Linear (no easing) with opacity.