Alert dialog

Example

<button
	type="button"
	data-slean="button"
	data-variant="danger"
	commandfor="alert-dialog-delete"
	command="show-modal"
>
	Delete project
</button>

<dialog
	id="alert-dialog-delete"
	data-slean="alert-dialog"
	role="alertdialog"
	closedby="none"
	aria-labelledby="alert-dialog-delete-title"
	aria-describedby="alert-dialog-delete-description"
>
	<header data-slean-part="header">
		<h2 id="alert-dialog-delete-title" data-slean-part="title">Delete this project?</h2>
		<p id="alert-dialog-delete-description" data-slean-part="description">
			The project and its history are removed. This cannot be undone.
		</p>
	</header>
	<footer data-slean-part="footer">
		<button
			type="button"
			data-slean="button"
			data-variant="outline"
			commandfor="alert-dialog-delete"
			command="close"
			value="cancel"
			autofocus
		>
			Cancel
		</button>
		<button
			type="button"
			data-slean="button"
			data-variant="danger"
			commandfor="alert-dialog-delete"
			command="close"
			value="delete"
		>
			Delete project
		</button>
	</footer>
</dialog>

<script lang="ts">
	// Nothing to import: the browser owns the dialog. The stylesheets are optional.
	import '@svelte-lean/styles/button.css';
	import '@svelte-lean/styles/alert-dialog.css';
</script>

<button
	type="button"
	data-slean="button"
	data-variant="danger"
	commandfor="alert-dialog-delete"
	command="show-modal"
>
	Delete project
</button>

<dialog
	id="alert-dialog-delete"
	data-slean="alert-dialog"
	role="alertdialog"
	closedby="none"
	aria-labelledby="alert-dialog-delete-title"
	aria-describedby="alert-dialog-delete-description"
>
	<header data-slean-part="header">
		<h2 id="alert-dialog-delete-title" data-slean-part="title">Delete this project?</h2>
		<p id="alert-dialog-delete-description" data-slean-part="description">
			The project and its history are removed. This cannot be undone.
		</p>
	</header>
	<footer data-slean-part="footer">
		<button
			type="button"
			data-slean="button"
			data-variant="outline"
			commandfor="alert-dialog-delete"
			command="close"
			value="cancel"
			autofocus
		>
			Cancel
		</button>
		<button
			type="button"
			data-slean="button"
			data-variant="danger"
			commandfor="alert-dialog-delete"
			command="close"
			value="delete"
		>
			Delete project
		</button>
	</footer>
</dialog>

Why this implementation exists

A confirmation before an irreversible action should not disappear without an answer. <dialog> opened with showModal() already has the modal parts: the top layer, the inert page, focus moved in and returned. closedby="none" removes the close request, so Escape does not dismiss it, and a modal dialog never closes on a backdrop click unless closedby="any" asks for that.

Svelte Lean adds the role, the attributes and a narrower surface than the Dialog, with the actions in a footer and focus on the least destructive one. Each action closes the dialog with its value, which becomes the dialog’s returnValue.

Usage

The markup needs no package. Install @svelte-lean/styles for the stylesheet; @svelte-lean/primitives adds the typed contract and nothing at runtime.

npm install @svelte-lean/styles

pnpm add @svelte-lean/styles

yarn add @svelte-lean/styles

bun add @svelte-lean/styles

import '@svelte-lean/styles/alert-dialog.css';

Open with command="show-modal". Give every action command="close" and a value, or make the actions submit buttons in a <form method="dialog">; read returnValue in a close listener.

Put autofocus on the least destructive action, so Enter right after opening cancels.

Where closedby is not implemented, Safari 27 among them, Escape closes the dialog without changing returnValue. Treat any value but the confirming one as a cancel, and reset returnValue after reading it.

The APG dialog pattern closes on Escape. To keep that, use closedby="closerequest": Escape cancels and the backdrop still does nothing.

Anatomy

Runtime profile

Tier 0: the alert dialog has no behavior module, and the Vite plugin maps alert-dialog to no module. Opening, closing, focus and the return value are the browser’s.

Accessibility contract

• role="alertdialog" with aria-labelledby on the title and aria-describedby on the description, so the question and its consequence are announced when the dialog opens.
• Focus moves to the autofocus action when the dialog opens and returns to the invoker when it closes.
• The rest of the page is inert while the dialog is open; Tab and Shift+Tab stay inside it.
• Escape does nothing where closedby is implemented; the actions are the way out, and each is a labelled button.

Keyboard

Platform features

Without JavaScript

With invoker commands supported, the dialog opens and closes with no script, and returnValue is set. Without invoker commands and without script it stays closed, so a confirmation that must work everywhere keeps a server-side confirmation step.

Server rendering

Static HTML. A modal dialog opens on the client only; the server renders it closed.

Before hydration

Nothing is attached. Where invoker commands are supported, the dialog opens before hydration as it does after.

Styling

alert-dialog.css draws the Dialog’s surface at a narrower width and without a scrolling body: header, title, description and the actions in the footer. The entrance and exit are transitions of opacity and scale with a fading backdrop; the durations are tokens and are zero under reduced motion. The tokens it reads:

State selectors the stylesheet targets, all from the platform or ARIA: ::backdrop, [open].

Controlled integration

The answer is the dialog’s returnValue, read when it closes. No open state is mirrored.

<script lang="ts">
	let dialog: HTMLDialogElement;
	let answer = $state('');

	// close fires after an action, with its value in returnValue. Where closedby="none" is not
	// implemented it also fires after Escape, with returnValue unchanged: reset it after reading,
	// and treat anything but the confirming value as a cancel.
	function onclose() {
		answer = dialog.returnValue;
		dialog.returnValue = '';
		if (answer === 'delete') {
			// delete the project
		}
	}
</script>

<dialog id="alert-dialog-delete" data-slean="alert-dialog" role="alertdialog" closedby="none"
	aria-labelledby="alert-dialog-delete-title" aria-describedby="alert-dialog-delete-description"
	bind:this={dialog} {onclose}>
	…
</dialog>

Compatibility notes

Invoker commands shipped in Chrome 135, Safari 26 and Firefox 144 during 2025. closedby is implemented in Chrome 134 and Firefox 141 and not in Safari 27, where Escape cancels the dialog. Safari 27 has no overlay either, so there the exit transition runs after the dialog has left the top layer.

Testing

• apps/playground/tests/primitives/inputs-overlays.spec.ts Playwright, with page JavaScript enabled and disabled, and axe
• packages/styles/tests static checks of the stylesheet (layers, tokens, specificity, dark parity)

Source

• packages/primitives/src/alert-dialog/contract.md the contract in prose: semantics, keyboard, focus, ARIA, SSR, JS-disabled behavior
• packages/primitives/src/alert-dialog/contract.ts typed constants: name, tier, base, parts, options, events
• packages/styles/css/alert-dialog.css the optional stylesheet