Componentes
Diálogo de confirmação
Só para confirmar uma ação destrutiva ou irreversível. A pergunta, a consequência com valor, a ação em perigo final e "Voltar" com o foco.
Quando usar
- excluir, recusar, debitar — o que não tem volta
Quando não usar
- formulário em diálogo
- window.confirm()
- "OK" e "Cancelar"
Exemplo
claro
escuro
<div class="site-dialog-stage">
<dialog class="hx-dialog" open aria-labelledby="dlg">
<h2 class="hx-dialog-title" id="dlg">Recusar a entrega da etapa 5?</h2>
<p>O cliente volta a ter H$ 989,00 reservados. Esta ação não pode ser desfeita.</p>
<form class="hx-dialog-actions" method="dialog">
<button class="hx-button hx-button-danger-solid" type="submit" value="confirmar">Recusar entrega</button>
<button class="hx-button" type="submit" value="voltar" autofocus>Voltar</button>
</form>
</dialog>
</div>Abrir
<button class="hx-button hx-button-danger" type="button" commandfor="recusar" command="show-modal">Recusar entrega</button>
<dialog class="hx-dialog" id="recusar" aria-labelledby="recusar-titulo">…</dialog>commandfor/command abre sem script onde o navegador suporta; hibex.js cobre os outros. Sem script nenhum, a ação leva a uma página de confirmação com o mesmo conteúdo.
Origem: cap. 00 §3.3, cap. 05 §3.7 · ADR-0016 · desde a versão 0.1.0