Kit part · Dialogs

Dialog

A decision that must be made now: a native dialog with a question, one sentence of consequence, a way back and the act.

Element: <dialog>
Needs: kit.css
Rules: dialog.rules.md · 3
Finishes: Aluminium · Graphite · Porcelain · Black
Volumes: Tactile · Quiet

On this page

Variants
Every state, at once
API
Markup
Accessibility
How it’s built
Rules
Related parts

Variants

Confirm

Remove the heat pump?

Its schedule goes with it.

Keep itRemove

Destructive

Every state, at once

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

Aluminium

Part	Open	Destructive	Focus on the act
Dialog	Confirm Erase reel 3? The take and its 14 markers go.	Confirm Remove the heat pump? Its schedule goes with it.	Confirm Erase reel 3? The take and its 14 markers go.

Graphite

Part	Open	Destructive	Focus on the act
Dialog	Confirm Erase reel 3? The take and its 14 markers go.	Confirm Remove the heat pump? Its schedule goes with it.	Confirm Erase reel 3? The take and its 14 markers go.

API

Name	Kind	Values	What it does
.tui-dialog	class	on <dialog>	A face plate up to 440px wide, 24px inside, raised high off the desk.
.tui-dialog__actions	class	on <form method="dialog">	Keys right-aligned, 24px under the text.
showModal() · close()	method	native	Opens modally with a backdrop, traps focus, returns it on close.
returnValue	property	native	The value of the key that closed it.
close · cancel	event	native	After it closes; cancel on Escape.
Escape	keyboard	—	Closes it, as native.

Markup

<button class="tui-key" id="erase">Erase reel 3</button>

<dialog class="tui-dialog" id="erase-dialog" aria-labelledby="erase-t">
  <p class="tui-label">Confirm</p>
  <h2 class="tui-h3" id="erase-t">Erase reel 3?</h2>
  <p class="tui-muted">The take and its 14 markers go. The mix you exported yesterday stays.</p>
  <form method="dialog" class="tui-dialog__actions">
    <button class="tui-key tui-key--flat" value="keep">Keep it</button>
    <button class="tui-key tui-key--primary" value="erase">Erase reel</button>
  </form>
</dialog>

const dialog = document.getElementById('erase-dialog');
document.getElementById('erase').addEventListener('click', () => dialog.showModal());
dialog.addEventListener('close', () => {
  if (dialog.returnValue === 'erase') eraseReel(3);
});

Needs kit.css only, no script. How to install the kit.

Native <dialog> with showModal(): focus moves in, is trapped, and returns to the opening key.
Name it with aria-labelledby pointing at the question.
Put the flat key first, so the safe choice is reached first.

How it’s built

The browser’s own dialog, dressed: the face token, a high soft shadow, 14px corners and a ::backdrop of the desk colour. It arrives with the kit’s rise (220ms, 8px, a fade), which reduced motion turns off.

Rules

dialog.rules.mdIn the brain

The title is a question; one sentence says what happens; a flat key backs out.

3 rules in this file, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.

See the Founder Pass How agents use the brain

Preset saved.