Modal Overlays

Use modal overlays when you want the user to complete a discrete task that's not part of the current workflow on the underlying page. Modal overlays, unlike dialogs, can have complex forms and multiple steps.

Modal overlays are great for creation flows, such as creating a new Campaign. They lead users through a series of steps to set up a campaign, and then slide away to reveal the editor beneath them.

They're also great for secondary tasks that users can do at any time, such as adding audiences to a campaign.


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, say "Close" instead.

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