Components

Modal

A centered dialog over a dimmed overlay: a bordered head with a title and a close button, a scrollable body, and a footer of actions. A __spacer pushes the primary action to the right.

Static dialog

The dialog box on its own (the fixed .ds-overlay backdrop is omitted here so it renders in flow). Head, body, and footer with a .ds-modal__spacer separating the destructive action.

Dialog

Reference settings

Body content…

<div class="ds-modal">
  <div class="ds-modal__head">
    <h2 class="ds-modal__title">Reference settings</h2>
    <button class="ds-button ds-modal__close">Close</button>
  </div>
  <div class="ds-modal__body"><p>Body content…</p></div>
  <div class="ds-modal__foot">
    <button class="ds-button">Export</button>
    <span class="ds-modal__spacer"></span>
    <button class="ds-button ds-button--danger">Reset</button>
    <button class="ds-button ds-button--primary">Save</button>
  </div>
</div>

Web Component

The <ds-modal> element builds the overlay and dialog from its heading attribute; footer actions go in a data-foot slot. A [data-open] trigger calls its .open() method. Click below to open it live.

<ds-modal>

Body…

 
<button class="ds-button ds-button--primary" data-open="#demoModal">Open modal</button>
<ds-modal id="demoModal" heading="Reference settings">
  <p>Body…</p>
  <div data-foot>
    <button class="ds-button">Cancel</button>
    <span class="ds-modal__spacer"></span>
    <button class="ds-button ds-button--primary">Save</button>
  </div>
</ds-modal>