Alert dialogs can be disruptive because they require users to take an action before returning to the application; they should be used thoughtfully and sparingly.
Acknowledgment dialogs are used when the system requires the user to acknowledge the presented information. It contains only a single action, commonly “Okay”.
Confirmation dialogs are used to confirm significant user decisions. Clearly describe the action being confirmed and explain any potential consequences that it may cause. Both the title and the button should reflect the action that will occur.
The title should in most cases be phrased as a short binary dichotomous question, so that the action is easy and clear to make. Read this UX article for more copywriting direction and tips.
If the confirm action is asynchronous, you may also pass a
with the confirm action options to influence the button state.
Critical confirmation dialogs describe destructive or irreversible actions. They are commonly used in situations where confirmation of an action would result in significant data loss if done accidentally.
Use info dialogs to communicate impactful information at key moments:
- Celebrate the success of a large task
- Welcome a new user onboard
- Inform users that their free trial has ended
You can use any of our Spot or Hero illustrations in the
Content dialogs are commonly used for short and non-frequent tasks, such as editing or management tasks. If a user needs to repeatably preform a task, consider making the task do-able from the main page.
The content dialog is composed of three distinct zones: A header, the body, and a footer.
The content dialog is available in three sizes:
small- text content or short forms
medium- use for medium to large forms
large- reserved for tables, and other data rich interfaces
The content dialog will fill the available vertical space. When this happens the "body" section will become scrollable.
Compose other components together within the content modal to create sophisticated interfaces.
Has no opinions about content, render whatever you need as