Alert Dialog

Confirm destructive or irreversible actions before proceeding.

Installation

pnpm dlx @mielui/svelte add alert-dialog

Usage

Confirm and Close call onclick before closing. Call event.preventDefault() to keep the alert dialog open, or set closeOnClick={false} for asynchronous work. Both support bind:element. Focus starts on Exit when the dialog opens. Set ariaBusy on Content while a confirmation is pending.

The theme's chrome.borders setting chooses single or double framing. single is the default.

<script lang="ts">
    import * as AlertDialog from '@mielui/svelte/components/alert-dialog';
    import Kbd from '@mielui/svelte/components/kbd';
</script>

<AlertDialog.Root error>
    <AlertDialog.Trigger variant="destructive">Delete</AlertDialog.Trigger>
    <AlertDialog.Content size="md">
        <AlertDialog.Header>
            <AlertDialog.Title>Delete this project?</AlertDialog.Title>
            <AlertDialog.Description>This cannot be undone.</AlertDialog.Description>
        </AlertDialog.Header>
        <AlertDialog.Footer>
            <AlertDialog.Close>Cancel <Kbd shortcut="esc" /></AlertDialog.Close>
            <AlertDialog.Confirm>Delete <Kbd shortcut="enter" /></AlertDialog.Confirm>
        </AlertDialog.Footer>
    </AlertDialog.Content>
</AlertDialog.Root>

Examples

Workspace deletion

The trigger and title carry an icon, and a status line reports the result.

Sample workspace is active.

Destructive confirmation

Sign out confirmation

Glass surface

Set surface="glass" on Content for a translucent, blurred background. Omit surface to inherit --mielui-surface from the theme, or set surface="solid" to override it. Glass falls back to an opaque surface when backdrop filtering is unavailable or reduced transparency is requested.

Keeping it open

An alert dialog never closes from a press outside. Escape still closes it. Set allowEscape={false} on Content when even that is too easy, such as a confirmation the person must read.

Confirm and Close close the dialog after onclick. Call event.preventDefault() there to keep it open while you work, and show progress with loading and labels. onOpenChange on Root tells you each time it opens or closes, whichever way that happened.

Nothing deleted yet

Buttons and text parts

Trigger, Close and Confirm are built on Button, so they accept its props. variant and size change the look, disabled blocks activation, and href renders a link. loading shows a spinner and ignores clicks, and labels sets the text for each state. unstyled removes the Button classes so class alone styles the part. onclick and onkeydown run before the part does its own work. Confirm is destructive when Root has error.

Header, Title, Description and Footer render their children and take class.

API reference

AlertDialog.Root

Controls alert dialog state.

open Bindable

boolean
Whether it is open. Bind it to control the state from outside.

Default false
onOpenChange

((open: boolean) => void)
Called with the new state whenever it opens or closes.
error

boolean
Sets supported browser chrome to red while the alert dialog is open.

Default false
children

Snippet<[]>
Content rendered inside.

AlertDialog.Close

Closes the dialog without confirming.

closeOnClick

boolean
Closes the dialog after the button is clicked. Set false to keep it open while work finishes.

Default true
disabled

boolean
Prevents activation. A disabled link loses its destination and is skipped by Tab.
variant

ButtonVariant
Visual style. Choose it for what the action means, not for decoration.
size

"sm" | "md" | "lg" | "icon"
Control height. icon is a square button for a single icon.
children

Snippet<[]>
Content rendered inside.
element Bindable

HTMLButtonElement | HTMLAnchorElement
Bindable reference to the rendered DOM element. Type is the union of the two possible element types -- narrow at the use site:
unstyled

boolean
Skip the variant/size base classes and render with class alone.
status

ButtonStatus
Controlled visual state. Loading remains focusable and refuses activation.
loading

boolean
Convenience alias for status="loading".
labels

ButtonLabels
Overrides the built-in text and accessible names. Every key is optional and English is the fallback.
onclick

((event: MouseEvent) => void)
Called when the button is activated. Loading and disabled buttons do not call it.
onkeydown

((event: KeyboardEvent) => void)
Called on key down, before the button handles the key itself.
href

string
Renders a link to this address instead of a button.

AlertDialog.Confirm

Confirms and closes the dialog.

closeOnClick

boolean
Closes the dialog after the button is clicked. Set false to keep it open while work finishes.

Default true
disabled

boolean
Prevents activation. A disabled link loses its destination and is skipped by Tab.
variant

ButtonVariant
Visual style. Choose it for what the action means, not for decoration.
size

"sm" | "md" | "lg" | "icon"
Control height. icon is a square button for a single icon.
children

Snippet<[]>
Content rendered inside.
element Bindable

HTMLButtonElement | HTMLAnchorElement
Bindable reference to the rendered DOM element. Type is the union of the two possible element types -- narrow at the use site:
unstyled

boolean
Skip the variant/size base classes and render with class alone.
status

ButtonStatus
Controlled visual state. Loading remains focusable and refuses activation.
loading

boolean
Convenience alias for status="loading".
labels

ButtonLabels
Overrides the built-in text and accessible names. Every key is optional and English is the fallback.
onclick

((event: MouseEvent) => void)
Called when the button is activated. Loading and disabled buttons do not call it.
onkeydown

((event: KeyboardEvent) => void)
Called on key down, before the button handles the key itself.
href

string
Renders a link to this address instead of a button.

AlertDialog.Content

Renders the dialog surface.

surface

"solid" | "glass"
Surface treatment. Omit it to inherit --mielui-surface from the theme.
ariaBusy

boolean
Marks the dialog busy for assistive technology while an action runs.
allowEscape

boolean
Lets Escape dismiss the dialog.

Default true
size

DialogSize
Maximum width of the panel. Defaults to xs.

Default 'xs'
class

string
Classes added to the element.
children

Snippet<[]>
Content rendered inside.

AlertDialog.Description

Renders the dialog description.

class

string
Classes added to the element.
children

Snippet<[]>
Content rendered inside.

AlertDialog.Footer

Groups dialog actions.

class

string
Classes added to the element.
children

Snippet<[]>
Content rendered inside.

AlertDialog.Header

Groups dialog heading content.

class

string
Classes added to the element.
children

Snippet<[]>
Content rendered inside.

AlertDialog.Title

Renders the dialog title.

class

string
Classes added to the element.
children

Snippet<[]>
Content rendered inside.

AlertDialog.Trigger

Opens the alert dialog.

disabled

boolean
Prevents activation. A disabled link loses its destination and is skipped by Tab.
variant

ButtonVariant
Visual style. Choose it for what the action means, not for decoration.
size

"sm" | "md" | "lg" | "icon"
Control height. icon is a square button for a single icon.
children

Snippet<[]>
Content rendered inside.
element Bindable

HTMLButtonElement | HTMLAnchorElement
Bindable reference to the rendered DOM element. Type is the union of the two possible element types -- narrow at the use site:
unstyled

boolean
Skip the variant/size base classes and render with class alone.
status

ButtonStatus
Controlled visual state. Loading remains focusable and refuses activation.
loading

boolean
Convenience alias for status="loading".
labels

ButtonLabels
Overrides the built-in text and accessible names. Every key is optional and English is the fallback.
onclick

((event: MouseEvent) => void)
Called when the button is activated. Loading and disabled buttons do not call it.
onkeydown

((event: KeyboardEvent) => void)
Called on key down, before the button handles the key itself.
href

string
Renders a link to this address instead of a button.