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.
On this page
Playground
Kind
Background
<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
<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
<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
Pause the 12 reminders?
You can turn them back on in Settings.
- The question: the action, the thing’s name and its size.
- What happens, and whether there is a way back.
- The action: verb and object; wine when it destroys.
- 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"?
The question and the button say the same thing.
Don’t
Are you sure?
"Are you sure?" with Yes and No: it does not say what.
Accessibility
- The browser’s
<dialog>withshowModal(): traps focus, closes with Esc and returns focus. - Name and description:
aria-labelledbyandaria-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. |