Dialog

Uma pergunta curta no meio da tela, antes de uma ação de efeito grande ou sem volta. Só fecha com uma resposta.

Playground

<button class="feitio-button" type="button" data-open-dialog="pg-dialog">Pausar lembretes</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 os 12 lembretes?</h2><div id="pg-dialog-d"><p>Você pode reativá-los em 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>

Quando usar

• Antes de apagar, de revogar, de pausar tudo, de sair sem salvar.
• A partir da página de detalhe da coisa, onde a ação mora.

Quando não usar

• O que dá para desfazer: faça, com o StatusOverlay e um Notice.
• Ajuda, novidade ou propaganda: nunca.
• Um formulário: é uma página, ou um Drawer se for curto.
• Um Dialog abrindo outro: nunca.

Exemplos

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

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

Anatomia

Estados

• Abrindo: chega como papel colocado, no meio da tela, e o fundo escurece.
• Aberto: o resto da tela não recebe toque nem foco; um toque fora não fecha.
• Respondido: fecha, o foco volta para quem abriu, e o retorno aparece no container.

Bons e maus padrões

Acessibilidade

• O <dialog> do navegador com showModal(): prende o foco, fecha com Esc e devolve o foco.
• Nome e descrição: aria-labelledby e aria-describedby.

Atributos