Modal

A dialog overlay built on the native <dialog> element. The close button floats at the top right. Default border radius is 2px — use rounded-* utilities to override. Sizes from --sm (400px) to --full. Trigger with data-ln-dialog on a button.

Default modal

<dialog class="ln-modal" data-ln-dismissible open>
  <button class="ln-modal__close" data-ln-dismiss aria-label="Close">&times;</button>
  <div class="ln-modal__header">
    <h3 class="ln-modal__title">Modal title</h3>
  </div>
  <div class="ln-modal__body">
    <p>This is the modal body content. It can contain any markup.</p>
  </div>
  <div class="ln-modal__footer">
    <button class="ln-button ln-button--ghost">Cancel</button>
    <button class="ln-button ln-button--solid">Confirm</button>
  </div>
</dialog>

Small modal

<dialog class="ln-modal ln-modal--sm" data-ln-dismissible open>
  <button class="ln-modal__close" data-ln-dismiss aria-label="Close">&times;</button>
  <div class="ln-modal__header">
    <h3 class="ln-modal__title">Delete item?</h3>
  </div>
  <div class="ln-modal__body">
    <p>This action cannot be undone.</p>
  </div>
  <div class="ln-modal__footer">
    <button class="ln-button ln-button--ghost">Cancel</button>
    <button class="ln-button ln-button--solid ln-button--danger">Delete</button>
  </div>
</dialog>

Danger modal

<dialog class="ln-modal ln-modal--danger" data-ln-dismissible open>
  <button class="ln-modal__close" data-ln-dismiss aria-label="Close">&times;</button>
  <div class="ln-modal__header">
    <h3 class="ln-modal__title">Destructive action</h3>
  </div>
  <div class="ln-modal__body">
    <p>Are you sure you want to delete this project? All data will be permanently removed.</p>
  </div>
  <div class="ln-modal__footer">
    <button class="ln-button ln-button--ghost">Cancel</button>
    <button class="ln-button ln-button--solid ln-button--danger">Delete project</button>
  </div>
</dialog>

Reference

Class	Description	Responsive
`.ln-modal`	Modal container (applied to `<dialog>`)	No
`.ln-modal__close`	Close button	No
`.ln-modal__header`	Header area	No
`.ln-modal__title`	Modal heading	No
`.ln-modal__body`	Scrollable body area	No
`.ln-modal__footer`	Footer with action buttons	No
`.ln-modal--sm`	Small modal (400px max-width)	No
`.ln-modal--md`	Medium modal (560px, default)	No
`.ln-modal--lg`	Large modal (800px)	No
`.ln-modal--full`	Full viewport modal	No
`.ln-modal--scroll-body`	Constrains height with scrollable body	No
`.ln-modal--center`	Centre-align text and actions	No
`.ln-modal--danger`	Danger-coloured title	No