Studio
2

Dialog

Installation

pnpm dlx @mielui/svelte add 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.

Close and Confirm forward bind:element to their rendered control. Their click callback runs before dismissal and can cancel it with preventDefault.

Bind open on Root when another control needs to open or close the panel. Use onOpenChange to respond to changes initiated inside the component. Updating your bound value directly does not call that callback again. Each Root keeps its own state, so opening one instance does not change another.

Focus, Escape, and outside interactions are coordinated with nested overlays. Include a Title or give Content an aria-label. Description is optional; removing it also removes its accessible relationship. Trigger, Close, and Confirm click handlers can prevent the default state change with event.preventDefault().

import * as Dialog from '$lib/mielui/components/dialog';
import Kbd from '$lib/mielui/components/kbd';

let open = $state(false);

<Dialog.Root bind:open orientation="horizontal">
  <Dialog.Trigger>Open</Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title>Title</Dialog.Title>
    </Dialog.Header>
    <Dialog.Footer>
      <Dialog.Close>Cancel <Kbd shortcut="esc" /></Dialog.Close>
      <Dialog.Confirm>Save <Kbd shortcut="enter" /></Dialog.Confirm>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog.Root>

Examples

Basic

Nested

With select

A Select inside a dialog keeps its own layer: Escape closes the menu first and only then the dialog.

Compact

Large

Wide

Glass surface

Set surface="glass" on Dialog.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

Dialog.Root

Controls 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 dialog is open.

 false
orientation DialogOrientation | undefined

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

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

Dialog.Body

Renders the dialog body.

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

Dialog.Close

Closes the dialog.

Prop Type Default
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 —

Dialog.Confirm

Confirms and closes the dialog.

Prop Type Default
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 —

Dialog.Content

Renders the dialog surface.

Prop Type Default
surface "solid" | "glass" | undefined —
allowClickOutside boolean | undefined true
allowEscape boolean | undefined true
role "alertdialog" | "dialog" | undefined 'dialog'
contentClass string | undefined ''
overlayClass string | undefined ''
surfaceClass string | undefined ''
panelIdPrefix string | undefined 'dialog'
showClose boolean | undefined true
size DialogSize | undefined

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

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

Dialog.Description

Renders the dialog description.

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

Dialog.Footer

Groups dialog actions.

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

Dialog.Header

Groups dialog heading content.

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

Dialog.Title

Renders the dialog title.

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

Dialog.Trigger

Opens the dialog.

Prop Type Default
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 —