Overlays

Alert dialog

Asks before something important happens, such as deleting. It waits for an answer: a press outside doesn't close it.

Installation

npx sinaui add alert-dialog

Copy src/lib/ui/AlertDialog.svelte, Dialog.svelte, Button.svelte, Spinner.svelte, scroll-edges.ts and tokens.css. No dependencies.

Examples

Confirm a delete

The button waits while it works. The first try fails here, to show the dialog staying open with the reason; try again and it goes through.

<script lang="ts">
	import AlertDialog from '#lib/ui/AlertDialog.svelte';
	import Button from '#lib/ui/Button.svelte';
	import { toast } from '#lib/ui/toast/index.js';

	let open = $state(false);
	let attempts = 0;
	// Stands in for a request: the first try fails, so the error state can be seen; the second succeeds.
	const remove = () =>
		new Promise<void>((done, fail) =>
			setTimeout(() => {
				if (attempts++ % 2 === 0) fail(new Error("The library couldn't be reached. Try again."));
				else {
					done();
					toast.success('Manuscript deleted');
				}
			}, 900)
		);
</script>

<Button variant="danger" onclick={() => (open = true)}>Delete manuscript</Button>
<AlertDialog
	bind:open
	title="Delete this manuscript?"
	description="The Book of Optics and its 214 scanned pages will be removed for everyone. This can't be undone."
	confirmLabel="Delete"
	onconfirm={remove}
/>

Writing it

Ask a question that names the action: “Delete this manuscript?”
Say what happens and whether it can be undone.
Label the button with the verb (“Delete”), never “OK” or “Yes”.

Props

Prop	Type	Default
`open`	`boolean` (bindable)	`false`
`title`, `description`	`string`	required
`confirmLabel`	`string`	required
`cancelLabel`	`string`	`'Cancel'`
`tone`	`'danger' \| 'primary'`	`'danger'`
`onconfirm`	`() => void \| Promise<void>`; throw to keep it open with the message	required

Accessibility

An alert dialog: the question and description are read as soon as it opens.
Focus starts on Cancel, so a stray Enter never confirms.
Escape cancels, except while the action is under way. Focus returns to the button that opened it.