<md-dialog>
Dialogs can require an action, communicate information, or help users accomplish a task. There are two types of dialogs: basic and full-screen.
- Category
- Overlays
- Built with
Lit- Library
Material Web
- Author
- Package
-
@material/web - Component size
- 5.8 kB JS (minified + gzipped, JS includes dependencies beyond the library)
- Library size
- 6.8 kB JS (shared by every Material Web component, loaded once per page)
- Popular
- 5 out of 5
- Downloads
- 138,923/week · jsDelivr 24,226,684 hits/month (whole @material/web package)
- GitHub stars
- 11,283
- Latest stable version
2.5.0- License
- Apache-2.0
A dialog is a modal window that appears in front of app content to provide critical information or ask for a decision. Dialogs disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken.
Dialogs are purposefully interruptive, so they should be used sparingly. A less disruptive alternative is to use a menu, which provides options without interrupting a user’s experience.
On mobile devices only, complex dialogs should be displayed fullscreen.
Example usages:
- Common use cases for basic dialogs include alerts, quick selection, and confirmation.
- More complex dialogs may contain actions that require a series of tasks to complete. One example is creating a calendar entry with the event title, date, location, and time.