Studio
2

Alert Dialog

Installation

pnpm dlx @mielui/svelte add alert-dialog

Usage

The theme setting chrome.borders chooses "single" or "double" framing. Double is the default. Single removes the extra frame while preserving content padding, composition, and inset variants.

Confirm and Exit call onclick before closing. Prevent default to keep the alert dialog open, or set closeOnClick to false for asynchronous work. Both forward bind:element. Exit supplies the initial cancel-focus target; mounting another Exit later does not steal focus. Content accepts ariaBusy while confirmation is pending.

import * as AlertDialog from '$lib/mielui/components/alert-dialog';
import Kbd from '$lib/mielui/components/kbd';

<AlertDialog.Root orientation="vertical">
  <AlertDialog.Trigger>Delete</AlertDialog.Trigger>
  <AlertDialog.Content size="lg">
    <AlertDialog.Header>
      <AlertDialog.Title>Delete?</AlertDialog.Title>
      <AlertDialog.Description>This cannot be undone.</AlertDialog.Description>
    </AlertDialog.Header>
    <AlertDialog.Footer>
      <AlertDialog.Exit>Cancel <Kbd shortcut="esc" /></AlertDialog.Exit>
      <AlertDialog.Confirm>Delete <Kbd shortcut="enter" /></AlertDialog.Confirm>
    </AlertDialog.Footer>
  </AlertDialog.Content>
</AlertDialog.Root>

Examples

Destructive confirmation

Sign out confirmation

Glass surface

Set surface="glass" on AlertDialog.Content for a translucent background with blur. Omit surface to inherit --mielui-surface from your theme, or set surface="solid" to override it. The glass surface keeps an opaque fallback when backdrop filtering is unavailable and respects reduced-transparency preferences.

API reference

AlertDialog.Root

Controls alert dialog state.

Prop Type Default
open Bindable boolean | undefined false
onOpenChange ((open: boolean) => void) | undefined —
error boolean | undefined

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

 false
orientation DialogOrientation | undefined

Controls the default width and action layout. Defaults to `vertical`.

 'vertical'
children Snippet<[]> | undefined —

AlertDialog.Confirm

Confirms and closes the dialog.

Prop Type Default
closeOnClick boolean | undefined true
disabled boolean | undefined —
variant ButtonVariant | undefined —
size "sm" | "md" | "lg" | "icon" | undefined —
children Snippet<[]> | undefined —
element Bindable HTMLButtonElement | HTMLAnchorElement | undefined

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

 —
unstyled boolean | undefined

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

 —
status ButtonStatus | undefined

Controlled visual state. Loading remains focusable and refuses activation.

 —
loading boolean | undefined

Convenience alias for `status="loading"`.

 —
loadingLabel string | undefined —
successLabel string | undefined —
errorLabel string | undefined —
onclick ((event: MouseEvent) => void) | undefined —
onkeydown ((event: KeyboardEvent) => void) | undefined —
href string | undefined —

AlertDialog.Content

Renders the dialog surface.

Prop Type Default
surface "solid" | "glass" | undefined —
ariaBusy boolean | undefined —
allowEscape boolean | undefined true
size DialogSize | undefined

Width preset. Vertical layouts remain compact; horizontal layouts are one step wider.

 'sm'
class string | undefined —
children Snippet<[]> | undefined —

AlertDialog.Description

Renders the dialog description.

Prop Type Default
class string | undefined —
children Snippet<[]> | undefined —

AlertDialog.Exit

Closes the dialog without confirming.

Prop Type Default
closeOnClick boolean | undefined true
disabled boolean | undefined —
variant ButtonVariant | undefined —
size "sm" | "md" | "lg" | "icon" | undefined —
children Snippet<[]> | undefined —
element Bindable HTMLButtonElement | HTMLAnchorElement | undefined

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

 —
unstyled boolean | undefined

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

 —
status ButtonStatus | undefined

Controlled visual state. Loading remains focusable and refuses activation.

 —
loading boolean | undefined

Convenience alias for `status="loading"`.

 —
loadingLabel string | undefined —
successLabel string | undefined —
errorLabel string | undefined —
onclick ((event: MouseEvent) => void) | undefined —
onkeydown ((event: KeyboardEvent) => void) | undefined —
href string | undefined —

AlertDialog.Footer

Groups dialog actions.

Prop Type Default
class string | undefined —
children Snippet<[]> | undefined —

AlertDialog.Header

Groups dialog heading content.

Prop Type Default
class string | undefined —
children Snippet<[]> | undefined —

AlertDialog.Title

Renders the dialog title.

Prop Type Default
class string | undefined —
children Snippet<[]> | undefined —

AlertDialog.Trigger

Opens the alert dialog.

Prop Type Default
disabled boolean | undefined —
variant ButtonVariant | undefined —
size "sm" | "md" | "lg" | "icon" | undefined —
children Snippet<[]> | undefined —
element HTMLButtonElement | HTMLAnchorElement | undefined

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

 —
unstyled boolean | undefined

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

 —
status ButtonStatus | undefined

Controlled visual state. Loading remains focusable and refuses activation.

 —
loading boolean | undefined

Convenience alias for `status="loading"`.

 —
loadingLabel string | undefined —
successLabel string | undefined —
errorLabel string | undefined —
onclick ((event: MouseEvent) => void) | undefined —
onkeydown ((event: KeyboardEvent) => void) | undefined —
href string | undefined —