Dialog
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
Installation
$npx maddex add Dialog
Basic
Start with an uncontrolled dialog when the trigger and content can manage their own open state.
Preview
Controlled
Pass open and on-open-change when the surrounding page needs to reflect the dialog state.
Preview
Team invite
Keep a page-level summary in sync while the invite dialog opens and closes.
Dialog State
{inviteDialogStatus}
{inviteDialogCopy}
Long Form
Increase the dialog width and allow scrolling when the content needs more room than a short confirmation flow.
Preview