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.
- 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.
- 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.
Do's and Don'ts
When necessary, include data like ID’s, campaign names, etc in the message to make clear what change is happening to the user’s data.
Write titles in title case. Write descriptions in sentence case.
Choose an icon that fits your message. If there isn’t an obvious one, keep the default note icon.
Don’t write titles that don’t contain a verb.
Don’t add icons to buttons in dialogs.
Don’t add extra UI like buttons to dialogs.
Table of ContentsComponent VariantsDesign PrinciplesDo's and Don'ts