We use dialogs to provide useful information (FYI, some people call these “modals”). For example, dialogs can:
- Give a more detailed explanation or definition
- Guide the user through a series of steps
- Ask the user to make a choice
- Confirm that an action took place
In short, dialogs allow us to show different levels of information. If a design feels too complex, you can simplify the initial view and provide more detail inside a dialog.
How to use dialogs
Example Dialog
Hello!
This is an example dialog modal. Normally, it would never appear within the main flow of a page. But, you know, this is an example.
What do you think?
![]()
Keep the text brief and factual. People tend to dismiss dialogs quickly, so get to the point.
![]()
Provide clear actions. Buttons work best.
![]()
Don’t annoy people. Dialogs are triggered by a user’s actions, so don’t show them arbitrarily.
![]()
Don’t hide important info in a dialog.
Keep the text brief and factual. People tend to dismiss dialogs quickly, so get to the point.
Don’t annoy people. Dialogs are triggered by a user’s actions, so don’t show them arbitrarily.
{% toggleText('single-button') %}
Example Heading
![Close]()
Hello!
This is an example dialog modal. Normally, it would never appear within the main flow
of a page. But, you know, this is an example.
What do you think?
Dialogs are designed to look like they’re floating above the main window. When opening the dialog, the user metaphorically takes a step backward in space. From their perspective, the main layer recedes and the dialog comes into focus. It’s important to keep the main layer in view so the user knows they can easily go back to what they were doing.
Dialog elements
Make sure to use a consistent structure for dialogs, as shown here.
Sign up for Energy Alerts
Avoid surprises on your bill—with Energy Alerts, you’ll get SMS notifications whenever your energy use is unusually high. You can turn these off at any time.
- Dialog heading
- Short, simple, and descriptive.
- Main message
- Keep it brief. If the text feels wordy or confusing, people are more likely to dismiss it right away.
- Actions
- Prompt the user for a response, and provide a way to dismiss the dialog.
More examples
Explanation or definition
Who are your neighbors?
All neighbors
Approximately 100 homes similar to yours. Note: vacant homes are not included.
- All are within 20 mi
- 2650 - 2800 sq ft
- 89% are apartments
- Average 3.2 occupants
- 85% have electric heat
Efficient neighbors
The most efficient 20% of your neighbors.
Confirmation
Special message
You’re doing great!
Help your friends and family become savers too.
It looks like you’re being more energy efficient.
Share this page to help others save money and energy.
Dialog reference
Depending on what we need to communicate, we sometimes use a different dialog layout. Here are a few variations:
| Class | Description | |
|---|---|---|
| Left-aligned text | .text-align-left | Aligns the text in the dialog to the left, instead of the default centered. |
| Small | .small | Sets the dialog width to 30% of the viewport, or a minimum of 300px. Good for short, simple messages. |
| Large | .large | Sets the dialog width to 80% of the viewport, or a maximum of 800px. Useful when you have longer content (probably means to you need to take another pass at editing). |
| Full | .full | Expands the dialog to fill the entire viewport. |
| Success dialog | .success | The background of the header uses the success color. |
| Alert dialog | .alert | The background of the header uses the alert color. |
