Dialog

A basic Dialog with a DialogTrigger button that opens the modal. Includes a DialogHeader with title and description, and a DialogFooter with action buttons.

A Dialog containing a rich form layout with Input, DatePicker, Select, MultiSelect, Combobox, and RichTextEditor fields. Set TrapFocus="false" on DialogContent when using overlay components like DatePicker, Select, or Combobox inside a dialog, so their popovers can open correctly.

Use @bind-Open to programmatically control the dialog state. Set Open to true to open the dialog and false to close it, without needing a DialogTrigger.

A destructive action confirmation dialog using ButtonVariant.Destructive for the trigger. Wrap the cancel button in DialogClose to automatically close the dialog on click.

Set AsChild to true on DialogTrigger or DialogClose to pass trigger or close behavior to a child component instead of rendering an extra wrapper button element.

For dialogs with long content, wrap the body in a div with max-h-[300px] overflow-y-auto to make it scrollable. The header and footer remain fixed while the content scrolls.

Use the class attribute on DialogContent to override the default width. For example, sm:max-w-sm for a narrow dialog or sm:max-w-[600px] for a wider one.

Set ShowClose="false" on DialogContent to hide the default X close button. This forces the user to interact with the action buttons, useful for required confirmations.

Set Modal="false" on Dialog so that clicking outside does not close the dialog and the backdrop overlay is not rendered. Users can still interact with the page behind the dialog.

Open a second dialog from within the first by using controlled state with separate bool fields. A common pattern for "are you sure?" confirmations inside edit dialogs.

Set CloseOnEscape="false" and handle the OnEscapeKeyDown callback to intercept the Escape key. This lets you show a discard confirmation instead of immediately closing the dialog.