Overview
Overlays, including dialogs, drawers, and wizards, are pop-up layers that sit on top of the main interface. They allow us to request a decision from the user, provide critical information, or guide actions without overwhelming users.
Overlays aren’t a one-size-fits-all solution, so we have different types to serve each purpose.
Types of overlays
Dialog
A Dialog focuses the user’s attention on one task, decision, or piece of information.
User actions generally fit into the categories of Confirm (such as Delete), Create (such as Add or Upload), or Edit (such as editing a user input and choosing to Save their changes).
Examples:
- Unsaved changes
- Delete environment/tenant/project/etc
- Add environment/tenant/project/etc
- Import Step Template
- Upload package
Dialogs can be multi-step to guide users through a task using Next and Back actions. They also offer an optional, collapsible side panel for additional helpful information.
Examples:
- Configure Audit Stream
- Add New Kubernetes Agent
An Upsell Dialog is also available, specifically as a strategy for advertising a trial, converting trials to paid plans, plan upgrades, and feature onboarding.
Drawer
A Drawer contains supplementary content or actions, overlaying content from the right-hand side.
It can be a great way for users to view more information without leaving the original page and to retain context.
It offers more screen real estate than a Dialog, making it more suitable for complex tasks such as searching or navigating complex elements, while providing the same advantage of keeping the user on the same page.
It may contain a single step or multiple steps (using Next and Back actions).
Examples:
- Deployment Timeline
- Create Git Credential
Wizard
A Wizard is a full-screen overlay that uses a series of simple, manageable screens to guide users through a complex task step by step.
Only the steps and information relevant to the user’s situation are visible in a well-designed Wizard.
Example:
- Add New Project
Forms in Overlays
Forms often appear in overlays like Dialogs and Drawers, e.g., when creating an entity or editing settings.
See Forms in Overlays for guidance on the key decisions you'll need to make when building forms in overlays, including how to format your forms and choosing the overlay size that best fits your content.
Popovers in Overlays
See the Usage tab for guidance on how to use Popovers, like Popover Basic Help, in other overlays like Dialogs and Drawers.
How to choose the correct overlay
Choosing the right way to communicate with users often isn’t straightforward. Refer to the flowchart below to pick the most suitable approach for your use case:
Recommended reading
Other documentation that will help guide your thinking when working with this UI pattern.