Modal

Modal

The Modal component (<ae-modal>) provides a dialog overlay that temporarily blocks interaction with the main content. It handles focus trapping, keyboard navigation, and proper ARIA attributes automatically.

Installation

pnpm

pnpm add @aetherui-kit/core

npm

npm install @aetherui-kit/core

yarn

yarn add @aetherui-kit/core

Basic Usage

Open Modal

Welcome

This is a basic modal example with a simple message.

Close

<button data-open-modal>Open Modal</button>

<ae-modal>
<div slot="header">
  <h2>Welcome</h2>
</div>
<div slot="body">
  <p>This is a basic modal example with a simple message.</p>
</div>
<div slot="footer">
  <ae-button variant="primary" data-close-modal>Close</ae-button>
</div>
</ae-modal>

Examples

Confirmation Dialog

Delete Item

Confirm Deletion

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

Cancel Delete

<button data-open-modal>Delete Item</button>

<ae-modal>
<div slot="header">
  <h2>Confirm Deletion</h2>
</div>
<div slot="body">
  <p>Are you sure you want to delete this item? This action cannot be undone.</p>
</div>
<div slot="footer">
  <ae-button
    variant="secondary"
    data-close-modal
  >
    Cancel
  </ae-button>
  <ae-button
    variant="primary"
    data-close-modal
  >
    Delete
  </ae-button>
</div>
</ae-modal>

Form with Initial Focus

Open Form Modal

User Information

Name: Email:

Cancel Save

<button data-open-modal>Open Form Modal</button>

<ae-modal>
<div slot="header">
  <h2>User Information</h2>
</div>
<div slot="body">
  <form onsubmit="event.preventDefault()">
    <div style="display: flex; flex-direction: column; gap: 1rem;">
      <label>
        Name:
        <input id="name-input" type="text" style="display: block; width: 100%; margin-top: 0.5rem;" />
      </label>
      <label>
        Email:
        <input type="email" style="display: block; width: 100%; margin-top: 0.5rem;" />
      </label>
    </div>
  </form>
</div>
<div slot="footer">
  <ae-button
    variant="secondary"
    data-close-modal
  >
    Cancel
  </ae-button>
  <ae-button
    variant="primary"
    data-close-modal
  >
    Save
  </ae-button>
</div>
</ae-modal>

Properties

Property	Type	Default	Description
open	boolean	false	Controls the visibility of the modal
closable	boolean	true	Whether the modal can be closed by clicking the X button or the backdrop
backdrop	boolean	true	Whether to show the backdrop and allow clicking it to close
size	'small' | 'medium' | 'large'	'medium'	Controls the width of the modal

Events

Event	Detail	Description
ae-open	{}	Fired when modal opens
ae-close	{}	Fired when modal closes

Slots

Name	Description
header	Modal header content
body	Main modal content area
footer	Modal footer content, typically action buttons

CSS Parts

Part	Description
backdrop	The modal backdrop
panel	The modal container
header	The header section
body	The main content section
footer	The footer section
close-button	The close button
close-icon	The close button icon

CSS Custom Properties

Property	Description
--ae-modal-width	Width of the modal (default: 32rem)
--ae-modal-max-width	Maximum width of the modal (default: calc(100vw - 2rem))
--ae-modal-background	Background color of the modal (default: white)
--ae-modal-border-radius	Border radius of the modal (default: 0.5rem)
--ae-modal-padding	Padding inside the modal (default: 1.5rem)
--ae-modal-shadow	Box shadow of the modal
--ae-modal-text-color	Text color within modal (default: inherit)
--ae-modal-backdrop-color	Background color of the backdrop (default: rgba(0, 0, 0, 0.4))
--ae-modal-backdrop-blur	Blur effect applied to the backdrop (default: 2px)

Accessibility

The Modal component follows WAI-ARIA Dialog pattern best practices:

• Uses role="dialog" and aria-modal="true"
• Traps keyboard focus within the modal
• Supports closing via Escape key
• Restores focus when closed
• Prevents scrolling of background content

Browser Support

Works in all modern browsers that support Web Components.