> For a complete index of all SignalWire documentation pages, fetch https://signalwire.com/docs/llms.txt

# sw-ui-modal

Lightweight modal wrapper built on the native `<dialog>` element
with a built-in bounce-in / bounce-out animation.

```html
<sw-ui-modal id="dialog">
  <h2>Hello</h2>
  <p>I'm a modal.</p>
</sw-ui-modal>
```

Toggle visibility via the boolean `open` property. Opening calls
`dialog.showModal()` (so focus is trapped, the body is inert, and the
native `::backdrop` is rendered); closing animates out before calling
`dialog.close()` so the host can be removed cleanly.

The element fires a **cancelable** `sw-modal-close` event on ESC or
backdrop click — call `event.preventDefault()` from a parent to veto
the close (e.g. when there are unsaved changes in the dialog body).

_Class: `SwUiModal` · Module: `packages/web-components/src/components/UI/layout/sw-ui-modal.ts`_

## class: `SwUiModal`, `sw-ui-modal`

### Fields


<ParamField path="open" type="boolean" default="false" toc={true}>
  `open` field.
</ParamField>

### Attributes

| Name   | Field | Inherited From |
| ------ | ----- | -------------- |
| `open` | open  |                |

### CSS Properties

| Name                                  | Default | Description                            |
| ------------------------------------- | ------- | -------------------------------------- |
| `--sw-modal-duration`                 | `0.2s`  | Open / close animation duration.       |
| `--sw-modal-animation`                |         | Open animation (bounce-in by default). |
| `--sw-modal-close-animation`          |         | Close animation (bounce-out).          |
| `--sw-modal-backdrop-animation`       |         | Backdrop fade-in animation.            |
| `--sw-modal-backdrop-close-animation` |         | Backdrop fade-out animation.           |

### Slots

| Name | Description                                                                              |
| ---- | ---------------------------------------------------------------------------------------- |
|      | Dialog content. Receives focus via the platform \`\<dialog>\` element's autofocus rules. |

### Events

| Name | Detail | Description |
| ---- | ------ | ----------- |
| `sw-modal-close` | — | **Cancelable.** Fired on ESC or backdrop click; |

---