Dialogs

Use dialogs to prompt users to take action, such as confirming they want to delete a variation. Dialogs are great at focusing a user's attention on a single task, while maintaining a sense of place since the underlying page is still visible.

Dialogs should not accept input from users (such as in creation flows), or have more than one step. Use Modal Overlays instead.

Dialog example usage

Button Text

The primary button should take the format of "[Verb] [noun]", such as "Add Goal" or "Save Settings".

The secondary button that closes the dialog should say "Cancel," and not save any changes the user may have made. If your dialog automatically saves progress (such as the Goals dialog), say "Close" instead.

Read more about writing good button text in the buttons pattern.