Dialogs

<md-gb-button id="open-delete">Delete</md-gb-button>
<md-gb-dialog id="delete-dialog">
  <span slot="headline">Permanently delete?</span>
  Deleting the selected messages also removes them from your other devices.
  <form id="delete-form" method="dialog"></form>
  <md-gb-button slot="actions" form="delete-form" value="cancel">Cancel</md-gb-button>
  <md-gb-button slot="actions" form="delete-form" value="delete">Delete</md-gb-button>
</md-gb-dialog>

document.querySelector('#open-delete').addEventListener('click', () => {
  document.querySelector('#delete-dialog').show();
});

<md-gb-dialog open quick>
  <md-gb-icon slot="icon">info</md-gb-icon>
  <span slot="headline">Discard draft?</span>
  Your draft will be deleted.
  <md-gb-button slot="actions">Cancel</md-gb-button>
  <md-gb-button slot="actions">Discard</md-gb-button>
</md-gb-dialog>

<md-gb-button id="open-reset">Reset</md-gb-button>
<md-gb-dialog id="reset-dialog">
  <md-gb-icon slot="icon">restart_alt</md-gb-icon>
  <span slot="headline">Reset settings?</span>
  This returns your preferences to their defaults.
  <form id="reset-form" method="dialog"></form>
  <md-gb-button slot="actions" form="reset-form" value="cancel">Cancel</md-gb-button>
  <md-gb-button slot="actions" form="reset-form" value="reset">Reset</md-gb-button>
</md-gb-dialog>

document.querySelector('#open-reset').addEventListener('click', () => {
  document.querySelector('#reset-dialog').show();
});

<md-gb-button id="open-event">New event</md-gb-button>
<md-gb-dialog id="event-dialog" full-screen>
  <span slot="headline">New event</span>
  <md-gb-button slot="actions">Save</md-gb-button>
  <label>
    Event name
    <input type="text">
  </label>
</md-gb-dialog>

document.querySelector('#open-event').addEventListener('click', () => {
  document.querySelector('#event-dialog').show();
});

<md-gb-button id="open-archive">Archive</md-gb-button>
<p id="result" role="status"></p>
<md-gb-dialog id="archive-dialog">
  <span slot="headline">Archive this thread?</span>
  It moves out of your inbox.
  <form id="archive-form" method="dialog"></form>
  <md-gb-button slot="actions" form="archive-form" value="cancel">Cancel</md-gb-button>
  <md-gb-button slot="actions" form="archive-form" value="archive">Archive</md-gb-button>
</md-gb-dialog>

const dialog = document.querySelector('#archive-dialog');
document.querySelector('#open-archive').addEventListener('click', () => {
  dialog.show();
});
dialog.addEventListener('closed', () => {
  document.querySelector('#result').textContent =
    dialog.returnValue === 'archive' ? 'Archived' : 'Canceled';
});

<md-gb-button id="open">Open</md-gb-button>
<md-gb-dialog id="note-dialog">
  <span slot="headline">Reminder</span>
  This dialog closes itself after three seconds.
  <md-gb-button slot="actions" id="close">Close now</md-gb-button>
</md-gb-dialog>

const dialog = document.querySelector('#note-dialog');
document.querySelector('#open').addEventListener('click', async () => {
  await dialog.show();
  setTimeout(() => dialog.close(), 3000);
});
document.querySelector('#close').addEventListener('click', () => dialog.close());