Modals are highly contextual and can be disruptive, so pay close attention to the following language rules:
Pay close attention to where the user encounters this modal in their flow. Is this new information? Or is this a change in the usual flow? Adjust your language accordingly. A new step might require more context and an intro (like in an information modal). Whereas a change doesn’t require as much context as it does justification for the change and how it affects the user’s usual workflow.
Make sure that your titles are scannable and describe what the user is about to do. Include a strong verb. Avoid questions. Avoid words like “a” and “an.”
Write your body content keeping in mind that a user needs to perform an action. Guide them and avoid using superfluous language. Make each word count. Integrate links into your text to keep your writing concise.
Your CTA button should complement the title of the modal. If a user scans the title, the CTA button should clearly direct them towards an action. Don’t hesitate to use “next” as a button if the modal includes multiple pages.
All modals copy should be in sentence case i.e. the first letter of the first word is capitalized and everything else is in lower case unless it’s a proper noun or feature name. Always err on the side of minimal punctuation, so when you’ve written single, standalone sentences, leave out full stops and commas where possible.
Modals contain smaller pieces of additional content while maintaining the context of the rest of the page, covered by a transparent overlay.
The confirmation modal confirms the end result of an action such as Negative or Positive actions.
We don't use custom spot illustrations in confirmation modals. Instead, use the standard spot illustrations.
Input/edit modals allow people to change data or settings without leaving the page. They support the ability to edit up to 3 fields. Any more becomes crowded and a new page or Isolation modal is preferred.
An input/edit modal may also be used to present data-intensive information such as a list of employees where the information modal is inappropriate.
If data will be lost by dismissing the modal unintentionally, consider autosaving.
Information modals assist with education. They’re user triggered. They may be relative to a deeper level of information. May be useful for first time users. Heavily optional. Visual aid is good. Primary action optional.
Here are some examples of other existing design systems: