Dialog component

The kit:dialog component is a modal window based on the native HTML element <dialog>. Thanks to this foundation, it benefits from accessible and semantic features by default, such as focus management, closing with the Escape key or clicking outside the box (unless persistent is enabled).

It can be used to display temporary content above the main interface: messages, forms, confirmations, etc. It is controlled via the prop bindable open, can be customized in position, size, density and style, and adapts easily to all usage contexts.

kit:dialog calls showModal() / close() on the native <dialog> element in reaction to open. The backdrop blocks page interaction and closes the dialog when clicked unless persistent is set. Scrolling the page while a dialog is open is disabled automatically.

open is bindable set it to true to open, false to close, or bind it to react to user-initiated closes.

Examples of dialog

position

Controls the vertical alignment of the dialog on the viewport.

position: 'top' | 'center' | 'bottom' = 'center'

size

Controls the max-width of the dialog content panel.

size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'

persistent

When persistent is set, clicking the backdrop or pressing Escape does not close the dialog. The user must interact with the content to dismiss it.

persistent: boolean = false

Without preprocess Lapikit

If you aren’t using the Lapikit preprocessor in svelte.config.js, import the components directly:

API Reference

kit:dialog

props	type	description	default
open	`boolean`	Controls visibility. Bindable.	`false`
persistent	`boolean`	Prevents closing on backdrop click or Escape.	`false`
size	enum	Max-width of the content panel.	`'md'`
position	enum	Vertical alignment on the viewport.	`'center'`
density	enum	Padding inside the content panel.	`'default'`
rounded	enum	Border radius of the content panel.	`'md'`
classContent	`string \| string[]`	Class(es) applied to the inner content panel.
color	`string`	Foreground color override (`--kit-dialog-fg`).
background	`string`	Background color override (`--kit-dialog-bg`).
children	`Snippet`	Dialog content.

Remember to follow up with Modal or Popover to create complete user paths.