Components / Overlays & Dialogs / Alert Dialog

Alert Dialog beta

The decision that cannot be clicked away — for destructive, irreversible actions.

Preview

Uses: Button — include its CSS alongside this one.

<button class="btn btn-danger btn-md" data-alert-open>Delete project</button>
<dialog class="kalert" data-alert-dialog role="alertdialog" aria-label="Delete project">
  <div class="kalert-in">
    <h3>Delete this project?</h3>
    <p>The project and all of its files will be permanently deleted. This cannot be undone, and shared links stop working immediately.</p>
    <div class="kalert-row">
      <button class="btn btn-sec btn-md" data-alert-close>Keep project</button>
      <button class="btn btn-danger btn-md" data-alert-close>Delete project</button>
    </div>
  </div>
</dialog>

.kalert{border:0;border-radius:16px;padding:0;max-width:420px;width:calc(100% - 40px);box-shadow:0 30px 80px -20px rgba(0,0,0,.4);background:var(--k-bg);color:var(--k-ink);font-family:var(--k-font)}
.kalert::backdrop{background:rgba(24,24,27,.45);backdrop-filter:blur(3px)}
.kalert-in{padding:26px}
.kalert-in h3{font-size:16.5px;font-weight:600}
.kalert-in p{margin-top:9px;font-size:13.5px;color:var(--k-ink-2);line-height:1.8}
.kalert-row{display:flex;gap:9px;justify-content:flex-end;margin-top:22px}

const alertDlg = document.querySelector('[data-alert-dialog]');
document.querySelector('[data-alert-open]').addEventListener('click', () => alertDlg.showModal());
alertDlg.querySelectorAll('[data-alert-close]').forEach(b => b.addEventListener('click', () => alertDlg.close()));
alertDlg.addEventListener('cancel', e => e.preventDefault());

Usage

Only for actions that cannot be undone: deletes, revocations, sends. If it can be dismissed casually, use the Modal instead.

Accessibility

Unlike the Modal, backdrop clicks and Escape do not dismiss it — the cancel event is intercepted. The destructive button names the verb and the object.

Related parts

Command beta

The ⌘K palette: one input that searches actions and pages, driven from the keyboard.

palettesearchkeyboard

Context Menu beta

The right-click menu, written as a component instead of an accident of the browser.

right-clickmenu

Drawer beta

A panel that slides in from the edge — detail and forms without losing the page.

panelslide-inoverlay

Dropdown stable

Opens with a soft scale. Headings, dividers and a red danger item included.

menuactionscontext

Tree

Command