Dialog

A modal overlay that interrupts the user to show focused content or capture a decision. Reach for it for confirmations, short forms, or transient detail views; when the panel should slide in from a screen edge instead, set side on DialogContent (the sheet module re-exports these parts as Sheet* for that case). It portals to the body, traps focus, and closes on overlay click or Escape. Anatomy: Dialog (root) wraps a DialogTrigger and a DialogContent, which portals an overlay plus a panel holding DialogTitle, DialogDescription, DialogClose, and your content.

Confirmation

A dialog interrupts, so it should be asking something the page cannot. It portals to the body, traps focus, and closes on Escape or a click on the overlay. shadow-lg here is earned — this panel really does float above the page, which is the only thing a shadow is allowed to mean.

<Dialog>
	<DialogTrigger>
		<Button variant="destructive">Refund order</Button>
	</DialogTrigger>
	<DialogContent>
		<DialogTitle>Refund order 3410?</DialogTitle>
		<DialogDescription>
			$132.50 goes back to Alan Turing's card. This cannot be undone, and the order
			stays in the list marked refunded.
		</DialogDescription>
		<div class="flex justify-end gap-2">
			<DialogClose>
				<Button variant="secondary">Keep order</Button>
			</DialogClose>
			<DialogClose>
				<Button variant="destructive">Refund $132.50</Button>
			</DialogClose>
		</div>
	</DialogContent>
</Dialog>

Short form

A form small enough that leaving the page for it would cost more than it is worth. Fields inside read the dialog's surface and step off it on their own — nothing about them changes at the call site.

<Dialog>
	<DialogTrigger>
		<Button>Add discount</Button>
	</DialogTrigger>
	<DialogContent>
		<DialogTitle>New discount</DialogTitle>
		<DialogDescription>Applies at checkout to every channel.</DialogDescription>
		<div class="space-y-3">
			<div class="space-y-2">
				<Label for="code">Code</Label>
				<Input id="code" placeholder="SUMMER25" />
			</div>
			<div class="space-y-2">
				<Label for="amount">Amount off</Label>
				<Input id="amount" type="number" placeholder="25" />
			</div>
		</div>
		<div class="flex justify-end gap-2">
			<DialogClose>
				<Button variant="secondary">Cancel</Button>
			</DialogClose>
			<Button>Create discount</Button>
		</div>
	</DialogContent>
</Dialog>

As an edge sheet

side slides the panel in from an edge instead of centring it — the shape a filter drawer or a detail pane wants. The Sheet module re-exports these same parts under Sheet* names for that case, so a call site reads as what it is.

<Dialog>
	<DialogTrigger>
		<Button variant="secondary">Open details</Button>
	</DialogTrigger>
	<DialogContent side="right">
		<DialogTitle>Order 3412</DialogTitle>
		<DialogDescription>Ada Lovelace · 3 items · $248.90</DialogDescription>
	</DialogContent>
</Dialog>

API

`Dialog`

Prop	Type	Default	Description
`children`	`import('svelte').Snippet`		The dialog subtree: a `DialogTrigger` and a `DialogContent`.
`open` bindable	`boolean`	`false`	Bindable open state. Omit to let the `DialogTrigger` drive it, or set/bind it to control the dialog externally.
`onOpenChange`	`(open: boolean) => void`		Fires with the next open state whenever the dialog opens or closes (forwarded via `...rest`).

`DialogTrigger`

The element that opens a Dialog when activated.

Prop	Type	Default	Description
`children`	`import('svelte').Snippet`		Trigger content.
`class`	`string`		Additional Tailwind classes merged onto the trigger.

`DialogContent`

The panel of a Dialog, portaled above an overlay. Renders as a centered modal by default, or as an edge sheet when side is set.

Prop	Type	Description
`children`	`import('svelte').Snippet`	Panel content, typically `DialogTitle`, `DialogDescription`, and actions.
`side`	`'top'\|'bottom'\|'left'\|'right'`	Renders the panel as an edge sheet sliding in from this side instead of a centered modal.
`class`	`string`	Additional Tailwind classes merged onto the panel.

`DialogOverlay`

The dimmed backdrop rendered behind a Dialog's content.

Prop	Type	Default	Description
`class`	`string`		Additional Tailwind classes merged onto the backdrop.

`DialogTitle`

The accessible title of a Dialog's content.

Prop	Type	Default	Description
`children`	`import('svelte').Snippet`		Title text.
`class`	`string`		Additional Tailwind classes merged onto the title.

`DialogDescription`

The accessible supporting text of a Dialog's content.

Prop	Type	Default	Description
`children`	`import('svelte').Snippet`		Description text.
`class`	`string`		Additional Tailwind classes merged onto the description.

`DialogClose`

A button that closes the enclosing Dialog. With no children, renders an X icon pinned to the panel's top-right corner. With children (e.g. wrapping a Button), renders inline instead so it can sit in a footer action row alongside other controls.

Prop	Type	Default	Description
`children`	`import('svelte').Snippet`		Custom close control content, replacing the default X icon.
`class`	`string`		Additional Tailwind classes merged onto the close control.