# Dialog

Una pregunta corta en medio de la pantalla, antes de una acción con gran efecto o sin vuelta atrás. Solo se cierra con una respuesta.

## Playground

```html
<button class="feitio-button" type="button" data-open-dialog="pg-dialog">Pausar recordatorios</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">¿Pausar los 12 recordatorios?</h2><div id="pg-dialog-d"><p>Puedes reactivarlos en Ajustes.</p></div><div class="actions"><button type="submit" class="feitio-button" data-variant="primary" value="yes">Pausar</button><button type="submit" class="feitio-button" value="cancel" autofocus>Cancelar</button></div></form></dialog>
```

## Cuándo usarlo

-   Antes de borrar, revocar, pausar todo, salir sin guardar.
-   Desde la página de detalles del elemento, donde reside la acción.

## Cuándo no usarlo

-   **¿Qué se puede deshacer:** hágalo, con el StatusOverlay y un Notice.
-   **Ayuda, noticias o promoción:** nunca.
-   **Un formulario:** que es una página, o un Drawer si es corto.
-   **Un Dialog que abre otro:** nunca.

## Ejemplos

### Acción sin vuelta atrás

La acción en vino, y la última línea dice que no se puede deshacer. El foco comienza en Cancel.

Mostrar código

```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>
```

### Escriba para confirmar

Solo para lo que borra mucho a la vez: el botón de peligro solo se ilumina con la palabra correcta, y el foco empieza en el campo.

Mostrar código

```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>
```

## Anatomía

1.  **La pregunta:** la acción, el nombre de la cosa y su tamaño.
2.  **Qué pasa**, y si hay forma de volver atrás.
3.  **La acción:** verbo y objeto; vino cuando destruye.
4.  **Cancelar:** toma el foco en abierto.

## Estados

-   **Abriendo:** llega como papel colocado, en el centro de la pantalla, y el fondo se oscurece.
-   **Abierto:** el resto de la pantalla no recibe toques ni foco; un toque fuera no lo cierra.
-   **Respondido:** se cierra, el foco vuelve al iniciador y la retroalimentación muestra en el contenedor.

## Hacer y no hacer

Do

## ¿Eliminar "Respaldo"?

Eliminar calendarioCancelar

La pregunta y el botón dicen lo mismo.

Don’t

## ¿Está seguro?

SíNo

"¿Está seguro?" con Sí y No: no dice qué.

## Accesibilidad

-   El navegador `<dialog>` con `showModal()`: atrapa el foco, cierra con Esc y devuelve el foco.
-   Nombre y descripción: `aria-labelledby` y `aria-describedby`.

## Atributos

Atributo

Valores

Para qué sirve

`class="feitio-dialog"`

en el `<dialog>`

Papel levantado, en el centro de la pantalla.

`data-open-dialog`

el id

En el botón de apertura.

`method="dialog"`

en el formulario interno

Las respuestas cierran el Dialog.

`data-type-to-confirm`

la palabra

El botón de peligro solo se ilumina con él.

`autofocus`

en Cancel

El foco comienza en la respuesta que no hace nada.