Dialogs can require an action, communicate information, or help users accomplish a task. There are two types of dialogs: basic and full-screen.

Preview

Installation

To import just the component styles, copy the following into your project’s styles.css file:

/* Core Styles */
@import url('https://rodydavis.github.io/material-design-lite/css/core.css');
/* Material Icons */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
/* Roboto Font */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
/* Component Styles */
@import url('https://rodydavis.github.io/material-design-lite/css/components/dialog/style.css');

Usage

Start with a dialog or div element and add the dialog class name:

<dialog class="dialog"></dialog>

The dialog class name is implicit when using the dialog element.

Hero Icon (Optional)

To add a hero icon to a dialog add a i element with the material-icons class name:

<dialog class="dialog">
  <div class="icon-button">
    <i class="material-icons">add</i>
  </div>
</dialog>

Title (Optional)

To add a title to a dialog add a div element with the title class name:

<dialog class="dialog">
  <div class="title">Dialog with title</div>
</dialog>

Content (Optional)

To add content to a dialog add a div element with the content class name:

<dialog class="dialog">
  <div class="content">
    A dialog is a type of modal window that appears in front of app content to
    provide critical information, or prompt for a decision to be made.
  </div>
</dialog>

Actions (Optional)

To add actions to a dialog add a div element with the actions class name:

<dialog class="dialog">
  <div class="actions">
    <button class="text">Action 1</button>
    <button class="text">Action 2</button>
  </div>
</dialog>

Display Modes

Static

To have a dialog always be visible, add the open attribute to the dialog element:

<dialog class="dialog" open></dialog>

Modal

To have a dialog be modal, add the modal class name to the dialog element:

<dialog class="dialog modal"></dialog>

Then from your JavaScript, call the showModal() method on the dialog element:

const dialog = document.querySelector('dialog');
dialog.showModal();

Variants

Default

Default dialog styling.

<dialog class="dialog" open>
  <div class="icon-button">
    <i class="material-icons">add</i>
  </div>
  <div class="title">Dialog with hero icon</div>
  <div class="content">
    A dialog is a type of modal window that appears in front of app content to
    provide critical information, or prompt for a decision to be made.
  </div>
  <div class="actions">
    <button class="text">Action 1</button>
    <button class="text">Action 2</button>
  </div>
</dialog>

Design Tokens

Resources

• ARIA Resources
• MDN