Modal
Modals communicate information via a secondary window and allow the user to maintain the context of a particular task.
Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. What do they got in there? King Kong? Forget the fat lady! You're obsessed with the fat lady! Drive us out of here!
Table of Contents
Edit this section, Opens in new windowUsage
Modals inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.
Modals contain text and UI controls. They retain focus until dismissed or a required action has been taken. Use dialogs sparingly because they are interruptive.
Modals should never be obscured, either by other elements or the screen edge. Modals always retain focus until dismissed or a required action has been taken.
Modals
Modals may be dismissed in 3 ways:
- Using the “x” in the upper right-hand corner of the Modal
- Pressing the ESC key
- Clicking / touching outside of the Modal area
Dialogs
Dialogs can only be dismissed by taking one of the actions presented.
Types
Are you ready for this?
Are you ready for this?
Are you ready for this?
Are you ready for this?
Are you ready for this?
Are you ready for this?
Are you ready for this?
Anatomy
Header (optional)
Include a heading within the Modal that mirrors the action or button that was clicked by the user.
Body
The body content within a Modal should be as minimal as possible. Components that may be used in Modals include: Form fields, Text Area, Select, and Radio Buttons.
Footer
The footer area of a Modal typically contains a set of actions, mostly used in a Dialog. Refer to Button guidelines for usage.
Are you ready for this?
- Dismiss button
- Title (optional)
- Body
- Footer (optional)
Should we fire the laser?
- Title (optional)
- Footer
- Actions