Dialog
Last Updated on Sep 29, 2022
A dialog is an intrusive message that temporarily blocks the user from interacting with the rest of the application.
Component Variants
Design Principles
- Dialogs are intrusive messages. A choice must be made before the user can proceed.
- Dialogs don’t show up as notifications.
- Use the smallest size that fits your content. (Title should be 3 lines or less, body should be 4-6 lines or less)
- Generic-styled messages can either have 1 or 2 buttons.
- All dialogs must have a close in the top right support removal via the ESC key.
- Don’t add icons to buttons in dialogs.
- Make the primary action the user is taking the right primary button. Don’t make “Cancel” the primary action.
- An option to add a checkbox for “Do not show this again” is available to suppress future dialogs.
Writing Guidelines
- All messages should contain a title and a body.
- If the title is a sentence fragment, it should be title case. If it’s a full sentence, use sentance case.
- Write as generic a title as possible. (Usually between 5-7 words)
- Titles can be sentance fragments. If the title is a question, include a question mark.
- Don’t put data like campaign names, ids, etc. into the title. Put that info into the body of the message.
- Make the primary action the user is taking is always the right, primary button. Don’t make Cancel the primary action.