# Modal
The base modal, used for Dialog, Menu, Drawer variants, or on its own.

**Material documentation:**
[Dialogs](https://material.io/components/dialogs/)

**Selector:**
og-modal

**Use:**
`<og-modal></og-modal>`

## Module
```javascript
import { ModalModule } from '@opensesame/opensesameui';
```

## Types
```javascript
import { ModalProps } from '@opensesame/opensesameui';
import { ModalClasses } from '@opensesame/opensesameui';
```

## Props
Name | Type | Default | Description
---- | ---- | ------- | -----------
centered | boolean  &#124; string | `true` | If `true`, the modal will be centered in the viewport, if `false` the modal will be positioned absolutely. Use `false` if you want to position the modal in a container, such as for a tooltip or dropdown.
classes | object | | Override or extend the styles applied to the component.
className | string | | Class(es) applied to the component.
disableEscapeKey | boolean  &#124; string | `false` | If `true` an onEscapeKeyDown event is not emitted.
disableScrimClick | boolean  &#124; string | `false` | If `true` an onScrimClick event is not emitted.
elevation | number  &#124; string | 0 | `elevation` prop passed to the underlying Paper component.
open | boolean  &#124; string | `false` | If `true` the modal is open, and visible on the page.
square | boolean  &#124; string | `false` | `square` prop passed to the underlying Paper component.
withScrim | boolean  &#124; string | `true` | If `true` a scrim is placed between the modal and the page. Set to `false` to hide the scrim for things like tooltips, dropdowns, etc.

## Events
Name | Event | Description
---- | ----- | -----------
onEscapeKeyDown | `KeyboardEvent('keydown', { key: 'esc' })` | Event emmitted when the `esc` key is pressed.
onScrimClick | `MouseEvent('click')` | Event emmitted when the scrim is clicked. Not available if `withScrim = false`.

## Classes
Rule name | Class | Description
--------- | ----- | -----------
root | .og-modal-root | Styles applied to the root element.
centered | .og-modal-centered | Styles applied if `centered = true`.