# MModal

A modal is a dialog window that appears on top of the main content, requiring user interaction before returning to the main interface. It is used to focus attention on a specific task, provide important information, or request confirmation for an action. Modals typically include a title, description, and primary/secondary actions and should be used for single, focused tasks to avoid disrupting the user experience.


## Props

| Name | Description | Type | Default |
| --- | --- | --- | --- | 
| `open` | if `true`, display the modal. | `boolean` | - |
| `title` | Title of the modal. | `string` | - |
| `description` | Description of the modal. | `string` | - |
| `closable` | if `true`, display the close button. | `boolean` | `true` |
| `scroll` | if `false`, lock the scroll when open. | `boolean` | `true` |
| `closeOnOverlay` | if `true`, close the modal when clicking the overlay. | `boolean` | - |

## Slots

| Name | Description |
| --- | --- |
| `icon` | Use this slot to insert an icon next to the title of the modal. |
| `default` | Use this slot to insert the content of the modal. |
| `link` | Use this slot to insert a link in the footer. |
| `footer` | Use this slot to insert buttons in the footer. |

## Events

| Name | Description | Type |
| --- | --- | --- |
| `update:open` | Emits when the modal display changes, updating the modelValue prop. | [value: boolean] |

## Dependencies

### Depends on

- [MIconButton](../iconbutton)
- [MOverlay](../overlay)

### Graph

```mermaid
graph TD;
  MModal --> MIconButton
  MModal --> MOverlay
style MModal fill:#008240,stroke:#333,stroke-width:4px
```