Alert Dialog — cinder playground

Overview

Sticky blocking acknowledgement dialog that cannot be dismissed by Escape or backdrop click. The user must click an explicit action button to proceed.

Dialog model

AlertDialog is one of three dialog-level components:

Modal — generic shell for rich content and forms.
ConfirmDialog — preset for user-initiated binary decisions; Escape is a safe exit; cancel is the default focus.
AlertDialog — this component. Preset for system-initiated or out-of-band urgency. No Escape exit. No backdrop dismiss. No close button. Acknowledgement is mandatory.

The key distinction between AlertDialog and ConfirmDialog is who initiates the interruption and whether dismissal without acting is safe:

ConfirmDialog is for user-initiated actions that need a safety gate. Pressing Escape means "never mind" — a safe, expected exit. This includes high-impact destructive actions the user initiated, even ones that affect other people.
AlertDialog is for conditions the system surfaces that require the user to acknowledge before continuing. Pressing Escape would bypass acknowledgement, which is unsafe because the session state has already changed and proceeding without reading the message is incorrect.

Choosing this component

Session expiry, authentication loss, or network disconnection that requires the user to re-authenticate before continuing.
System-level errors or process failures where the user must acknowledge the condition before taking any other action.
Any situation where the dialog is triggered by a system event — not a user click — and dismissal by Escape or backdrop click would be incorrect because the user must read and respond.

Choosing something else

User-initiated destructive actions (including high-impact ones like "Delete workspace" or "Remove all collaborators") — use ConfirmDialog. Even when the action is irreversible or affects other people, Escape is a valid "never mind" because the user chose to open the dialog. ConfirmDialog's cancel-button autofocus is the right affordance.
Rich body content (markup, lists, multiple paragraphs) — description is a plain-text string. For rich body, compose Modal with role="alertdialog" directly (see Modal's role prop documentation for the required companion props).
Non-blocking notifications — use a toast or inline alert that does not interrupt the flow.

cancelLabel creates an explicit alternative action button (e.g. "Stay signed in" alongside "Sign out"). It is not an implicit dismiss path — there is no Escape, no backdrop click, no close-X.

Usage

<script lang="ts">
  import AlertDialog from '@lostgradient/cinder/alert-dialog';
</script>

<AlertDialog />

Live preview

When to use

Use when

Requiring acknowledgement of a blocking warning before the user can continue.
Presenting a destructive or high-risk message that needs an explicit OK action.

Avoid when

Asking a reversible yes/no question — use confirm-dialog.
Collecting rich form input — compose modal instead.

Examples

Basic alert dialog

A sticky acknowledgement dialog that cannot be dismissed by Escape.

Destructive alert dialog

A high-risk alert dialog with an optional cancel action.

Props

Props for alert-dialog
Name	Type	Default	Required	Bindable	Description
`open`	`boolean`	`false`		bind	Controls whether the alert dialog is open; bindable for controlled usage.
`title`	`text`		req		Text rendered as the dialog's visible heading and accessible label.
`description`	`text`		req		Explanatory paragraph displayed in the dialog body and wired to the dialog via aria-describedby.
`acknowledgeLabel`	`text`	`'OK'`			Label for the primary acknowledgement button. Default `OK`.
`cancelLabel`	`text`				Label for the optional cancel button. When omitted, no cancel button is rendered.
`destructive`	`boolean`	`false`			When true, styles the acknowledgement button as a danger action and, when a cancel button is rendered, gives it initial focus instead of the acknowledgement button. Default `false`.
`onAcknowledge`	`() => void`		req
`onCancel`	`() => void`
`triggerRef`	`HTMLElement \| null`	`null`