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.

CancelDelete

<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
closeOnEscape	close-on-escape	Whether pressing Escape closes the modal.	boolean	true
closeOnOverlayClick	close-on-overlay-click	Whether clicking the backdrop closes the modal.	boolean	true
hideClose	hide-close	Hides the built-in close button when true.	boolean	false
label	label	Accessible name for the dialog. When empty, a slotted heading is used via aria-labelledby instead.	string	''
open	open	Whether the modal is open.	boolean	false

Events

Event	Description	Type
andModalClose	Emitted when the modal is closed. Fires exactly once per close.	CustomEvent<void>

Methods

hide() => Promise<void>

Close the modal imperatively, running the exit animation if enabled.

Returns: Type: Promise<void>

show() => Promise<void>

Open the modal imperatively.

Returns: Type: Promise<void>

Shadow Parts

Part	Description
"close-button"
"container"
"content"
"overlay"

Generated from packages/web-components/src/components/and-modal/readme.md — keep this in sync with the Stencil source, don't hand-edit the numbers.