Dialog

Dialogs interrupt the current flow to confirm an action, gather focused input, or present short-form detail without leaving the page.

Basic Usage

Use a trigger, content container, header, and footer to create a straightforward modal action flow.

Confirmation

Use confirmation dialogs for destructive or high-impact actions. Set disable-pointer-dismissal so a backdrop click cannot dismiss by accident.

Scrollable Content

Constrain long content inside the dialog body so actions remain reachable.

Initial Focus

Put autofocus on the control that should receive focus when the dialog opens (often the first field).

API

Slots

Name	Description
trigger	Opens the dialog (optional — use open for declarative control)
header	Custom header region (replaces the built-in label header)
label	Dialog title
footer	Dialog footer actions
(default)	Dialog body

Props

Name	Description
description	Optional subtitle under the title in the built-in header (v1 DialogDescription). Type string
disablePointerDismissal	Maps to light-dismiss (inverted). Type boolean Default false
disableScrollLock	Skip document scroll lock while open. Useful for labs / rare cases where the page should keep scrolling under the modal (native dialog still traps focus). Type boolean Default false
label	Type string
open	Type boolean Default false
size	Type 'default' | 'wide' Default default
withoutBodyPadding	Opt out of the default 1rem body padding applied when the built-in header is shown. Use for flush layouts (sidebars, full-bleed pickers) that own their own inset. Type boolean Default false
withoutHeader	Type boolean Default false

Methods

Name	Description
hide(source: PkOverlaySource)	—
show(_source: PkOverlaySource)	Shows the dialog — show().

Events

Name	Description
onPkOpenChange	—

CSS Parts

Name	Description	CSS selector
body	Body region	::part(body)
footer	Footer region	::part(footer)
header	Header region	::part(header)
panel	Native dialog element	::part(panel)