Alert Dialog

Delete project

Delete this project?

Every deployment, environment and log will be removed. This cannot be undone.

Cancel Delete

Show code

Not the same as a dialog

A dialog is a place to do something, and you can dismiss it by clicking away or with a close control. An alert dialog blocks until the question is answered: there is no close button, the backdrop does not dismiss it, and it carries role="alertdialog" so assistive tech announces it as an interruption rather than a container.

Reach for this one whenever the choice is destructive or otherwise cannot be undone.

Usage

<button class="btn btn-destructive" data-pk-dialog-open="confirm-delete">Delete</button>

<dialog class="alert-dialog" id="confirm-delete">
  <div class="alert-dialog-header">
    <h3 class="alert-dialog-title">Delete this project?</h3>
    <p class="alert-dialog-description">This cannot be undone.</p>
  </div>
  <div class="alert-dialog-footer">
    <button class="btn btn-outline" data-pk-dialog-close>Cancel</button>
    <button class="btn btn-destructive" data-pk-dialog-close="confirm">Delete</button>
  </div>
</dialog>

Composition

Open

Title

The consequence, spelled out.

Cancel Confirm

Show code

Parts

Class	Part
.alert-dialog	The <dialog> element itself
.alert-dialog-header	Title area, centred on small screens
.alert-dialog-media	Optional icon that pairs with the title
.alert-dialog-title	Heading — becomes the accessible name
.alert-dialog-description	The consequence, spelled out
.alert-dialog-footer	Cancel and confirm

Attributes

Attribute	On	Meaning
data-pk-dialog-open="<id>"	any control	Opens it
data-pk-dialog-close[="<value>"]	a control inside	Closes it, optionally setting returnValue
data-size="sm"	the alert dialog	Compact: stays narrow and splits the footer into two columns
data-state="open" | "closed"	the alert dialog	Set by the runtime

The events are the dialog’s: pk:dialog:before-open, pk:dialog:open and pk:dialog:close.

Basic

Leave page

Leave without saving?

Your changes will be lost.

Stay Leave

Show code

Small

data-size="sm" keeps the panel narrow at every width and gives the two actions equal halves, which suits a short yes-or-no.

Discard draft

Discard draft?

Your unsaved changes will be lost.

Keep Discard

Show code

Media

.alert-dialog-media sits above the title on a small screen and moves beside it once there is room.

Revoke access

Revoke access?

This member loses access immediately and any tokens they created stop working.

Cancel Revoke

Show code

Small with Media

Open

Delete file?

It will not go to the bin.

Cancel Delete

Show code

Destructive

The confirm button carries the destructive variant, and the description says exactly what is lost.

Delete account

Delete your account?

Every project, deployment and invoice goes with it. This cannot be undone.

Keep my account Delete everything

Show code

RTL

Set dir="rtl" on the page or on any subtree — padding, corners and positions follow the reading direction on their own. See the button page for a live example.

Writing the question

The title asks, the description says what happens, and the confirm button names the action rather than agreeing:

<h3 class="alert-dialog-title">Delete this project?</h3>
<p class="alert-dialog-description">Every deployment and log will be removed.</p>
...
<button class="btn btn-destructive" data-pk-dialog-close="confirm">Delete</button>

Cancel comes first in the markup so it is the first thing keyboard and screen reader users reach, and it renders last on wider screens.

Handling the answer

document.getElementById("delete-project").addEventListener("pk:dialog:close", (event) => {
  if (event.detail.returnValue === "confirm") deleteProject();
});

Esc closes it, the same as any dialog, and counts as cancelling — returnValue is empty. Treat anything other than your confirm value as “no”.