---
class: ember
---
# ModalDialog

Consul UIs modal component is a thin wrapper around the excellent `a11y-dialog`. The
most common usage will be something like the below:

```hbs preview-template
<ModalDialog
  @onclose={{noop}}
  @onopen={{noop}}
  @aria={{hash
    label="Screenread name of the modal"
  }}
as |modal|>

  <!-- Save a reference to the modal component so we can call its methods -->
  {{did-insert (set this 'modal' modal)}}

  <BlockSlot @name="header">
    <h2>
      Modal Header
    </h2>
  </BlockSlot>
  <BlockSlot @name="body">
    <p>
      Modal body
    </p>
  </BlockSlot>
  <BlockSlot @name="actions">
    <button type="button"
      {{on "click" modal.close}}
    >
      Close modal
    </button>
  </BlockSlot>
</ModalDialog>

<button
  type="button"
  {{on 'click' (optional this.modal.open)}}
>
  Open Modal
</button>

```
All modals work in tandem with `<ModalLayer />` to render modals. First of all ensure
you have a modal layer on the page (it doesn't have to be in the same
template)

```hbs
<ModalLayer />
```

Then all modals will be rendered into the `<ModalLayer />`.

## Arguments

| Argument | Type | Default | Description |
| --- | --- | --- | --- |
| `onopen` | `Function` | `undefined` | A function to call when the modal has opened |
| `onclose` | `Function` | `undefined` | A function to call when the modal has closed |
| `aria` | `Object` | `undefined` | A `hash` of aria properties used in the component, currently only label is supported |
| `open` | `Boolean` | `false` | Whether the modal should be initialized in its 'open' state. Useful if the modal should be controlled via handlebars conditionals. Please note this argument it not yet reactive, i.e. it is only checked on component insert not attribute update. An improvement here would be to respect this value during the update of the attribute. |

## Exports

| Name | Type | Description |
| --- | --- | --- |
| `open` | `Function` | Opens the modal dialog |
| `close` | `Function` | Closes the modal dialog |