Modal | Destyler

A modal dialog that interrupts the user with important content and expects a response.

Features

Focus is automatically trapped.
Can be controlled or uncontrolled.
Manages screen reader announcements with Title and Description components.
Esc closes the component automatically.

Install

Import

API

Root

Props	Type	Default
defaultOpen	`boolean`	false
open	`boolean`	undefined

Event	Type
update:open	`[_value: boolean]`

Trigger

Props	Type	Default
as	`AsTag \| Component`	button
asChild	`boolean`	false

Data attribute	Value
[data-state]	'open' \| 'closed'

Portal

Props	Type	Default
disabled	`boolean`	false
forceMount	`boolean`	false
to	`string \| HTMLElement`	body

Overlay

Props	Type	Default
as	`AsTag \| Component`	div
asChild	`boolean`	false
forceMount	`boolean`	false

Data attribute	Value
[data-state]	'open' \| 'closed'

Content

Props	Type	Default
as	`AsTag \| Component`	div
asChild	`boolean`	false
disableOutsidePointerEvents	`boolean`	false
forceMount	`boolean`	false
isDismissable	`boolean`	true
trapFocus	`boolean`	false

Event	Type
closeAutoFocus	`[_event: Event]`
escapeKeyDown	`[_event: KeyboardEvent]`
focusOutside	`[_event: CustomEvent<{ originalEvent: FocusEvent; }>]`
interactOutside	`[_event: CustomEvent<{ originalEvent: PointerEvent; }> \| CustomEvent<{ originalEvent: FocusEvent; }>]`
openAutoFocus	`[_event: Event]`
pointerDownOutside	`[_event: CustomEvent<{ originalEvent: PointerEvent; }>]`

Data attribute	Value
[data-state]	'open' \| 'closed'

Title

Props	Type	Default
as	`AsTag \| Component`	h2
asChild	`boolean`	false

Description

Props	Type	Default
as	`AsTag \| Component`	p
asChild	`boolean`	false

Cancel

Props	Type	Default
as	`AsTag \| Component`	button
asChild	`boolean`	false

Action

Props	Type	Default
as	`AsTag \| Component`	button
asChild	`boolean`	false