# Dialog

> Source: https://design.nanatec.co.ke/components/dialog/
> A modal dialog built on the native `<dialog>` element — so it gets the top layer, a backdrop, focus trapping and Escape-to-close for free. Compose it from `nana-dialog-header`, `nana-dialog-body` and `nana-dialog-footer`.

A modal dialog built on the native `<dialog>` element — so it gets the top layer, a backdrop, focus trapping and Escape-to-close for free. Compose it from `nana-dialog-header`, `nana-dialog-body` and `nana-dialog-footer`.

## Preview

```html
<nana-dialog label="Dialog" open>
  Set the <code>open</code> attribute or call <code>show()</code> to display it.
</nana-dialog>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/dialog";
```

## Basic usage

```html
<nana-dialog label="Dialog" open>
  Set the <code>open</code> attribute or call <code>show()</code> to display it.
</nana-dialog>
```

## Subcomponents

Compose the dialog with `nana-dialog-header`, `nana-dialog-body`, and
`nana-dialog-footer`. Open it with the `open` attribute, `.show()`, or a
`data-open="#id"` trigger; close with `data-close`.

```html
<nana-button data-open="#invite">Invite teammate</nana-button>

<nana-dialog id="invite" aria-label="Invite teammate">
  <nana-dialog-header>Invite teammate</nana-dialog-header>
  <nana-dialog-body>
    <nana-input label="Email" type="email" placeholder="ada@example.com"></nana-input>
  </nana-dialog-body>
  <nana-dialog-footer>
    <nana-button variant="ghost" data-close>Cancel</nana-button>
    <nana-button variant="primary" data-close>Send invite</nana-button>
  </nana-dialog-footer>
</nana-dialog>
```

## Variants & sizes

Set `variant` (`modal`, `alert`, `drawer`, `fullscreen`) and `size`
(`xs`–`xl`, `fullscreen`). Use `placement="start|end"` for the drawer variant.

```html
<nana-dialog variant="alert" size="sm" aria-label="Delete project">…</nana-dialog>
<nana-dialog variant="drawer" placement="end" aria-label="Settings">…</nana-dialog>
<nana-dialog variant="fullscreen" aria-label="Editor">…</nana-dialog>
```

## API

## Events

| Event | Type | Description |
|---|---|---|
| `nana-open` | `CustomEvent` | Fired after the dialog opens |
| `nana-close` | `CustomEvent` | Fired after the dialog closes (`detail.returnValue`) |

## Slots

| Slot | Description |
|---|---|
| `(default)` | Dialog content (header / body / footer) |

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--nana-dialog-width` | — | Panel width (per size by default) |
| `--nana-dialog-backdrop` | — | Backdrop colour |
| `--nana-dialog-radius` | — | Panel corner radius |

## CSS Parts

| Part | Description |
|---|---|
| `dialog` | The native `<dialog>` element |
| `panel` | The content surface |

## Accessibility

<ul class="a11y-grid not-content">
  <li>Keyboard accessible</li>
  <li>Screen-reader labels</li>
  <li>Focus-visible states</li>
  <li>ARIA roles and states</li>
  <li>WCAG 2.2 AA contrast</li>
</ul>

## Related components

<ul class="related not-content">
  <li><a href="/components/card/">Card</a></li>
  <li><a href="/components/details/">Details</a></li>
  <li><a href="/components/divider/">Divider</a></li>
  <li><a href="/components/drawer/">Drawer</a></li>
  <li><a href="/components/popup/">Popup</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-dialog--docs