Modal

An accessible modal dialog using the native <dialog> element with focus trap, closing animation, and backdrop blur.

Basic

Preview Code click to open

Open Modal

Confirm action

✕

Are you sure you want to delete this item? This action cannot be undone.

CancelDelete

<ac-button variant="primary" onclick="document.getElementById('demo-modal').show()">
Open Modal
</ac-button>

<ac-modal id="demo-modal">
<div class="ac-modal__content">
  <div class="ac-modal__header">
    <h2 class="ac-modal__title">Confirm action</h2>
    <button class="ac-modal__close" data-ac-modal-close aria-label="Close">✕</button>
  </div>
  <div class="ac-modal__body">
    Are you sure you want to delete this item? This action cannot be undone.
  </div>
  <div class="ac-modal__footer">
    <ac-button variant="secondary" data-ac-modal-close>Cancel</ac-button>
    <ac-button variant="danger">Delete</ac-button>
  </div>
</div>
</ac-modal>

Copy

Size variants

Preview Code sm · lg · xl

SmallLargeXL

Small modal

✕

Compact dialog for quick confirmations.

OK

Large modal

✕

More space for forms and longer content.

Close

XL modal

✕

Full-width content area for complex layouts.

Close

<!-- Small -->
<ac-button variant="secondary" size="sm" onclick="document.getElementById('modal-sm').show()">Small</ac-button>
<!-- Large -->
<ac-button variant="secondary" size="sm" onclick="document.getElementById('modal-lg').show()">Large</ac-button>
<!-- XL -->
<ac-button variant="secondary" size="sm" onclick="document.getElementById('modal-xl').show()">XL</ac-button>

Copy

JavaScript API

const modal = document.querySelector('ac-modal');
modal.show();
modal.close();
modal.toggle();

Accessibility

• Native <dialog> — browsers handle scroll lock and backdrop automatically
• Focus trap: Tab / Shift+Tab stays inside the modal
• Escape closes the modal
• role="dialog" + aria-modal="true" + aria-labelledby auto-wired to .ac-modal__title

Attributes

Attribute	Values	Description
open	boolean	Shows the modal
size	sm | md | lg | xl | full	Dialog width
scrollable	boolean	Sticky header/footer, scrollable body
label	string	Overrides aria-label