Modal

Native modal window based on <dialog> tag with ::backdrop CSS pseudo-element. Features built-in X close button, action buttons, and flexible configuration.

Documentation:

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
• https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop

Basic Modal with Title and X Button

<Modal id="dialog1" open="Open modal" title="Modal Title">
    <p>This modal has a title and built-in X close button in the top-right corner.</p>
    <p>You can also close by clicking the backdrop or pressing Escape.</p>
</Modal>

Modal with Action Buttons

<Modal
     id="dialog2"
     open="Delete Item"
     title="Confirm Delete"
     showActions
     cancelText="Cancel"
     confirmText="Delete"
>
     <p>Are you sure you want to delete this item? This action cannot be undone.</p>
</Modal>

Modal with Custom Actions

<Modal
     id="dialog3"
     open="Save Changes"
     title="Save Document"
     showActions
>
     <p>Would you like to save your changes before closing?</p>

     <div slot="actions" class="flex gap-3 justify-end">
          <form method="dialog" class="contents">
               <Button>Don't Save</Button>
          </form>
          <form method="dialog" class="contents">
               <Button primary>Save</Button>
          </form>
     </div>
</Modal>

Modal with Custom Width

<Modal
     id="dialog4"
     open="Wide Modal"
     title="Large Content"
     maxWidth="900px"
>
     <p>This modal is wider than the default. Useful for forms or detailed content.</p>
</Modal>

Modal without X Button (Legacy Style)

<Modal id="dialog5" open="Open modal" title="Custom Close" showXButton={false}>
     <p>This modal doesn't have the X button.</p>
     <Button primary slot="close" class="mt-4">Close Modal</Button>
</Modal>

Modal with Custom Close Button (Icon)

<Modal id="dialog6" open="Open modal" title="Icon Close" showXButton={false}>
     <p>Some extra content you would like here</p>
     <Button primary slot="close" class="mt-4"><Icon name="octicon:x-24" /></Button>
</Modal>

Handling Confirm Events

You can listen for the confirm event when using action buttons:

document.getElementById('dialog2').addEventListener('confirm', (e) => {
     console.log('Confirmed!', e.detail);
     // Perform your action here
     document.getElementById('dialog2').close();
});

Props

Slots

Features

• ✅ Built-in X close button in top-right corner
• ✅ Click backdrop to close
• ✅ Press Escape to close
• ✅ Built-in action buttons (Cancel/Confirm)
• ✅ Customizable width
• ✅ TypeScript support
• ✅ Fully accessible with ARIA labels