# xpl-modal

Modals are dialogs that focus the user’s attention exclusively on one task or piece of information via a window layer above the current content.

Modals are disruptive and should only be used when disrupting the user’s flow is desired.

<!-- Auto Generated Below -->


## Properties

| Property  | Attribute | Description                      | Type                             | Default     |
| --------- | --------- | -------------------------------- | -------------------------------- | ----------- |
| `isOpen`  | `is-open` | Whether the modal is open.       | `boolean`                        | `false`     |
| `size`    | `size`    | The size of the modal.           | `"large" \| "medium" \| "small"` | `'medium'`  |
| `variant` | `variant` | The visual variant of the modal. | `"default" \| "warning"`         | `'default'` |


## Events

| Event         | Description                       | Type                |
| ------------- | --------------------------------- | ------------------- |
| `modalClosed` | Emitted when the modal is closed. | `CustomEvent<void>` |


## Slots

| Slot          | Description                        |
| ------------- | ---------------------------------- |
| `"body"`      | The body of the modal.             |
| `"primary"`   | The primary button of the modal.   |
| `"secondary"` | The secondary button of the modal. |
| `"subtitle"`  | The subtitle of the modal.         |
| `"tertiary"`  | The tertiary button of the modal.  |
| `"title"`     | The title of the modal.            |


## Dependencies

### Depends on

- [xpl-backdrop](../xpl-backdrop)
- [xpl-icon](../xpl-icon)
- [xpl-button](../xpl-button)

### Graph
```mermaid
graph TD;
  xpl-modal --> xpl-backdrop
  xpl-modal --> xpl-icon
  xpl-modal --> xpl-button
  xpl-button --> xpl-icon
  style xpl-modal fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*