Modal

Centered dialog (role="dialog", aria-modal="true") with a focus trap, Escape-to-close, backdrop click, and focus restoration on close. Renders nothing while closed.

Example

Open modal

Delete this item?

This action can't be undone.

Cancel Delete

<and-button id="modal-trigger">Open modal</and-button>
<and-modal id="my-modal">
  <div style="padding: 1.5rem;">
    <h3>Delete this item?</h3>
    <p>This action can't be undone.</p>
  </div>
</and-modal>

<script>
  modalTrigger.addEventListener('click', () => (myModal.open = true));
  myModal.addEventListener('andModalClose', () => (myModal.open = false));
</script>

Properties

Property	Attribute	Description	Type	Default
animated	animated	Whether to animate the modal entrance and exit.	boolean	false
open	open	Whether the modal is open.	boolean	false

Events

Event	Description	Type
andModalClose	Emitted when the modal is closed.	CustomEvent<void>