Alert dialog

Confirm a destructive action

Use role="alertdialog" so assistive technology announces an interruption rather than an ordinary dialog. It has no dismiss affordance of its own on purpose — the caller supplies both answers, so there is no ambiguous way out.

<button type="button" class="button error" data-dialog="doc-alert">Delete workspace</button>
<dialog id="doc-alert" class="alert-dialog" role="alertdialog" aria-labelledby="doc-alert-title">
  <form method="dialog">
    <h3 id="doc-alert-title" class="alert-dialog-title">Delete this workspace?</h3>
    <p class="alert-dialog-description">Every component and setting in it goes with it. This cannot be undone.</p>
    <div class="alert-dialog-actions">
      <button type="submit" class="button secondary sm">Cancel</button>
      <button type="submit" class="button error sm">Delete</button>
    </div>
  </form>
</dialog>