# certara-modal

<!-- Auto Generated Below -->


## Overview

Component for modal and dialog content

## Properties

| Property              | Attribute                | Description                                                                                                                                                                                   | Type                                           | Default     |
| --------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | ----------- |
| `bodyClassName`       | `body-class-name`        | Adds optional classes to the modal body container                                                                                                                                             | `string`                                       | `undefined` |
| `centered`            | `centered`               | Boolean value to center the modal vertically in the view port. If false, the modal will appear at the top of the screen.                                                                      | `boolean`                                      | `false`     |
| `closeDisabled`       | `close-disabled`         | If true, close button is hidden. Modal cannot be dismissed by clicking outside or escape key. The modal can only be closed by setting `open` to false with a function call.                   | `boolean`                                      | `false`     |
| `closeOnClickOutside` | `close-on-click-outside` | If true, close the modal when the user clicks on the backdrop                                                                                                                                 | `boolean`                                      | `false`     |
| `footerClassName`     | `footer-class-name`      | Adds optional classes to the modal footer container                                                                                                                                           | `string`                                       | `undefined` |
| `headerClassName`     | `header-class-name`      | Adds optional classes to the modal header slot, if used, for instance to change padding or background color                                                                                   | `string`                                       | `undefined` |
| `heading`             | `heading`                | The text to display in the heading of the modal                                                                                                                                               | `string`                                       | `undefined` |
| `modeless`            | `modeless`               | Will set modal to modeless, allowing interaction with the rest of the page and remvoing the backdrop.                                                                                         | `boolean`                                      | `false`     |
| `open`                | `open`                   | Boolean value to open and close the modal. If true, the modal will appear, if false, the modal will hide.                                                                                     | `boolean`                                      | `false`     |
| `position`            | `position`               | Anchor position of modal only when sidebar='true'. Valid values are 'left' and 'right' (default is 'left').                                                                                   | `"left" \| "right"`                            | `'left'`    |
| `scrollable`          | `scrollable`             | If true, the body of the modal will be scrollable if the contents reach overflow. If false, the entire modal, including header and footer will be scrollable if the content reaches overflow. | `boolean`                                      | `false`     |
| `sidebar`             | `sidebar`                | If true, this will render the modal appearing as an anchored sidebar (default anchor position is left of viewport)                                                                            | `boolean`                                      | `false`     |
| `size`                | `size`                   | The size of the modal                                                                                                                                                                         | `"fullscreen" \| "lg" \| "md" \| "sm" \| "xl"` | `'md'`      |


## Events

| Event          | Description                                                             | Type                |
| -------------- | ----------------------------------------------------------------------- | ------------------- |
| `certaraClose` | Fired when the modal is closed via the close button, or the escape key. | `CustomEvent<void>` |


## Slots

| Slot       | Description                                                                                                                                        |
| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| `"body"`   | Slot for the modal body content                                                                                                                    |
| `"footer"` | Slot for the footer content, typically action buttons                                                                                              |
| `"header"` | Slot for the modal header content. Use this if you need more custom content in the heading. If you just need a title, use the `heading` attribute. |


## Dependencies

### Used by

 - [certara-idle](../idle)

### Depends on

- [certara-close-button](../close-button)

### Graph
```mermaid
graph TD;
  certara-modal --> certara-close-button
  certara-idle --> certara-modal
  style certara-modal fill:#f9f,stroke:#333,stroke-width:4px
```

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