# Dialog

A short question in the middle of the screen, before an action with a big effect or no way back. It only closes with an answer.

## Playground

```html
<button class="feitio-button" type="button" data-open-dialog="pg-dialog">Pause reminders</button><dialog class="feitio-dialog" id="pg-dialog" aria-labelledby="pg-dialog-t" aria-describedby="pg-dialog-d"><form method="dialog"><h2 id="pg-dialog-t">Pause the 12 reminders?</h2><div id="pg-dialog-d"><p>You can turn them back on in Settings.</p></div><div class="actions"><button type="submit" class="feitio-button" data-variant="primary" value="yes">Pause</button><button type="submit" class="feitio-button" value="cancel" autofocus>Cancel</button></div></form></dialog>
```

## When to use

-   Before deleting, revoking, pausing everything, leaving without saving.
-   From the thing’s detail page, where the action lives.

## When not to use

-   **What can be undone:** do it, with the StatusOverlay and a Notice.
-   **Help, news or promotion:** never.
-   **A form:** that is a page, or a Drawer if short.
-   **A Dialog opening another:** never.

## Examples

### Action with no way back

The action in wine, and the last line says it cannot be undone. Focus starts on Cancel.

Show code

```html
<button type="button" class="feitio-button" data-variant="danger" data-open-dialog="apagar">Apagar</button>
<dialog class="feitio-dialog" id="apagar" aria-labelledby="apagar-t" aria-describedby="apagar-d">
  <form method="dialog">
    <h2 id="apagar-t">Apagar o agendamento "Backup semanal"?</h2>
    <ul id="apagar-d"><li>…</li><li>Não dá para desfazer.</li></ul>
    <div class="actions">
      <button type="submit" class="feitio-button" data-variant="danger" value="apagar">Apagar agendamento</button>
      <button type="submit" class="feitio-button" value="cancelar" autofocus>Cancelar</button>
    </div>
  </form>
</dialog>
```

### Type to confirm

Only for what deletes a lot at once: the danger button only lights up with the right word, and focus starts in the field.

Show code

```html
<form method="dialog" data-type-to-confirm="APAGAR">
  …
  <input class="feitio-input" id="confirmar" autocomplete="off">
  <button type="submit" class="feitio-button" data-variant="danger" disabled>Apagar 12 agendamentos</button>
</form>
```

## Anatomy

1.  **The question:** the action, the thing’s name and its size.
2.  **What happens**, and whether there is a way back.
3.  **The action:** verb and object; wine when it destroys.
4.  **Cancel:** takes focus on open.

## States

-   **Opening:** arrives as placed paper, in the middle of the screen, and the background dims.
-   **Open:** the rest of the screen takes no taps or focus; a tap outside does not close it.
-   **Answered:** it closes, focus returns to the opener, and feedback shows on the container.

## Do and don’t

Do

## Delete "Backup"?

Delete scheduleCancel

The question and the button say the same thing.

Don’t

## Are you sure?

YesNo

"Are you sure?" with Yes and No: it does not say what.

## Accessibility

-   The browser’s `<dialog>` with `showModal()`: traps focus, closes with Esc and returns focus.
-   Name and description: `aria-labelledby` and `aria-describedby`.

## Attributes

Attribute

Values

What for

`class="feitio-dialog"`

on the `<dialog>`

Lifted paper, in the middle of the screen.

`data-open-dialog`

the id

On the opening button.

`method="dialog"`

on the inner form

The answers close the Dialog.

`data-type-to-confirm`

the word

The danger button only lights up with it.

`autofocus`

on Cancel

Focus starts on the answer that does nothing.