---
url: /api/renderers/web-components/src/variables/modal.md
---
[pantoken-root](../../../../index.md) / [renderers/web-components/src](../index.md) / modal

# Variable: modal

> `const` **modal**: [`ElementDefinition`](../interfaces/ElementDefinition.md)

Alpha

`<instui-modal>` — a real `<dialog>`, so it gets focus trapping, Escape-to-close, and a
`::backdrop` for free. The `open` attribute drives `showModal()`/`close()`; a native dismissal
(Escape or a backdrop click) reflects back to the attribute and re-fires as a bubbling `close`
event. Drivable from light DOM via Invoker Commands — a
`<button command="--show|--close|--toggle" commandfor="modal-id">` toggles it by id. Content goes
in the default slot.

## Example

```html
<button command="--show" commandfor="confirm">Delete…</button>
<instui-modal id="confirm">
  <h2>Delete this item?</h2>
  <button command="--close" commandfor="confirm">Cancel</button>
</instui-modal>
```