Alert Dialog @astryx-svelte/core v0.5.2 · AlertDialog
Usage
AlertDialog asks the user to confirm a destructive or irreversible action before it happens. Use it for things like deleting content, revoking access, or discarding unsaved changes. It implements the WAI-ARIA APG Alert Dialog pattern:role="alertdialog", a title linked by aria-labelledby, a consequence description linked by aria-describedby, focus moved into the dialog on open and returned to the trigger on close, and no dismissal by clicking outside. Escape cancels. AlertDialog passes its requested width through to Dialog, which clamps the surface to the container and dynamic viewport with token gutters. Generic Dialog footers should wrap, but Dialog does not own action semantics or order; consumer composition controls that. AlertDialog owns its confirmation semantics: above 640px, actions render horizontally and may move onto another row; at 640px and below, the destructive action appears above Cancel and both buttons fill the footer width. Button labels retain their standard single-line behavior. The breakpoint follows available width, not pointer or hover capability. The body scrolls when block space is constrained. For cases where you want to show an alert without managing open state, use the useImperativeAlertDialog hook: call alert.show(options) and render alert.element in your tree. ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Make the action button label specific: "Delete project" is better than "OK" or "Confirm". |
| Do | Describe what will happen in the description so the user knows the consequences before confirming. |
| Do | Keep the cancel button as the least-destructive focus target. On narrow screens the destructive action is visually and structurally above Cancel, but Cancel still receives initial focus. |
| Do | Use concise, specific action labels. Above 640px, complete buttons may move onto another row; at 640px and below, the destructive action appears above Cancel and both buttons fill the footer width. |
| Don't | Use AlertDialog for non-destructive actions; use a standard Dialog instead. |
| Don't | Rely on color alone to signal danger; the action label itself should say what will happen. |
| Don't | Close the dialog from onAction before the work finishes; hold it open with isActionLoading and call onOpenChange(false) when the action settles. |
Examples
Common configurations, variations, and states.AlertDialog — Loading
A confirmation dialog that shows a spinner while the action runs.