Skip to main content Curbcut by Baseline
Menu
All components

Dialog

A modal built on the native dialog element.

Delete draft?

This removes the draft. The published page is not affected.

Show the markup 
<button class="cc-button" type="button" data-cc-dialog-open="ex-dialog">Delete this draft</button>
<dialog class="cc-dialog" id="ex-dialog" aria-labelledby="ex-dialog-title">
  <div class="cc-dialog__header">
    <h2 id="ex-dialog-title" class="cc-heading cc-heading--md" style="margin:0">Delete draft?</h2>
    <button class="cc-button cc-button--secondary cc-button--sm" type="button" data-cc-dialog-close aria-label="Close"><svg class="cc-icon" aria-hidden="true"><use href="/assets/curbcut-icons.svg?v=1ac57b0#x"/></svg></button>
  </div>
  <div class="cc-dialog__body">
    <p class="cc-paragraph">This removes the draft. The published page is not affected.</p>
  </div>
  <div class="cc-dialog__footer">
    <button class="cc-button cc-button--secondary" type="button" data-cc-dialog-close>Cancel</button>
    <button class="cc-button cc-button--danger" type="button" data-cc-dialog-close>Delete draft</button>
  </div>
</dialog>

Accessibility

  • The dialog paints its own surface from the token palette rather than inheriting the browser's Canvas, so its text pairings are the audited ones in every mode.
  • Native <dialog>.showModal(): focus trapping, Esc to close, backdrop and focus restoration come from the platform.
  • Labeled by its heading; the close button has an accessible name.
  • Modals interrupt — reserve them for confirmations that genuinely block. Prefer a page for anything with more than a couple of fields.