components
Dialog (design)
To draw attention of the user to a dedicated piece of content, you can use a Dialog.
About
A dialog displays content in front of an app or website without losing context of the page beneath it. Use a dialog when you require a user's response or want to display critical information or a warning where a response is needed. They're intended to support short secondary tasks initiated by the user.
Usage
Use a dialog when a user needs to confirm or take an important action like logging in or signing up. Always use them in a thoughtful and intentional way, because they interrupt a user's experience and can be perceived as annoying.
How to use
- User-initiated: Do not trigger dialogs without a user taking an action e.g. page loads.
- Dismissable: Every dialog can be dismissed in different ways. Either by clicking the X button in the header, pressing the escape key or clicking the backdrop. If the user's abillity to dismiss a dialog is disabled, the user must choose an action to proceed.
- A sub-task: The user must take action, either in completing the sub-task or dismissing the window, to return to the main interface.
How not to use
- Displayed in groups: Do not open a dialog from inside another dialog. There should only be one dialog displayed at a time.
- Multistep: Avoid dialogs with multiple steps that require navigation within the dialog.
Default Dialog
The default dialog on tablet and desktop is always accompanied by a backdrop. The header, containing the close button, is optional and can be disabled if desired.
Mobile
On our web products, the dialog screen becomes a full screen experience with no backdrop. For our native app products, design seperate interfaces follwing the modal view guidelines for iOS or the dialog guidelines for Android.
Behaviour
A dialog always appears in front of the page, covering the page beneath it with a backdrop, so that the focus is on the dialog.
Closing a dialog
A dialog can be dismissed in different ways, this way the component meets accessibility guidelines for both mouse and keyboard interactions.
- Clicking the close button in the header
- Clicking anywhere on the backdrop
- Pressing Esc on your keyboard
Sizing
Dialogs have a fixed width, but can differ in height.The height is determined by how much content appears in the dialog. Once it reaches a certain size, the body of the dialog will scroll while the header remains fixed.
Related components
If you're looking to alert users about important information, use a Banner component.