components

Dialog

A customizable dialog component for displaying modal content on a page, typically used for alerts, confirmations, or custom forms.

Show code

API Reference

Extends all the standard HTML attributes of the `<div>` element.

Property	Type	Default	Description
`ref` $bindable	`HTMLDivElement`		Reference to the rendered DOM element.
`isOpen` $bindable	`boolean`	false	Manage/listen open state
`onClose`	`function`		Callback when dialog is closed
`layout`	`union`	"fixed"	Manage dialog layout - 'fixed' => Centered in viewport, overflow hidden - 'scroll' => Scrollable vertically, useful for tall content - 'fullscreen' => Fills the entire viewport (100vw × 100vh)
`closeOnBackdropClick`	`boolean`	true	Close dialog on backdrop click
`closeOnEscape`	`boolean`	true	Close dialog on escape key
`focusTrap`	`boolean`	true	Trap focus inside dialog content
`lockScroll`	`boolean`	true	Lock body scroll when open
`blurBackdrop`	`boolean`	false	Apply blur effect to the backdrop
`keepMounted`	`boolean`	false	Keep dialog in the DOM when closed instead of unmounting it
`transitionDelay`	`number`	0	Transition delay of open/close animation
`transitionDuration`	`number`	250	Transition duration of open/close animation
`children`	`Snippet`		Dialog content to render

Centered content in viewport, overflow hidden

Show code

Scrollable vertically, useful for tall content

Show code

Fills the entire viewport (100vw × 100vh)

Show code

Keep dialog in the DOM when closed instead of unmounting it

Show code

Show code