Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Features

  • Focus is automatically trapped.
  • Works in an uncontrolled way by default.
  • Can also be controlled.

Install the component from your command line.

Import the components and piece the parts together.

Create your styled dialog component from the dialog primitives.

Contains all the parts of a dialog.

PropTypeDefaultRequired
defaultOpenbooleanNo default valueNot required
openbooleanNo default valueNot required
onOpenChangefunctionNo default valueNot required
idstringNo default valueNot required

The button that opens the dialog.

PropTypeDefaultRequired
asenumbuttonNot required

A layer that covers the inert portion of the view when the dialog is open.

PropTypeDefaultRequired
asenumdivNot required
forceMountbooleanNo default valueNot required

Contains content to be rendered in the open dialog.

PropTypeDefaultRequired
asenumdivNot required
forceMountbooleanNo default valueNot required
onOpenAutoFocusfunctionNo default valueNot required
onCloseAutoFocusfunctionNo default valueNot required
onEscapeKeyDownfunctionNo default valueNot required
onPointerDownOutsidefunctionNo default valueNot required

The button that closes the dialog.

PropTypeDefaultRequired
asenumbuttonNot required

Adheres to the Dialog WAI-ARIA design pattern.

KeyDescription
SpaceOpens/closes the dialog.
EnterOpens/closes the dialog.
TabMoves focus to the next focusable element.
Shift + TabMoves focus to the previous focusable element.
EscCloses the dialog and moves focus to Dialog.Trigger.