StructuredDialog

Component | Source Code

extends DialogProps

Props Inheritance Hierarchy: ComponentPropsWithRef<“dialog”> -> DialogProps

Base component for a dialog with a standard structure. A structured dialog has, from top to bottom:

1. An optional (though strongly recommended) title. This should describe what the dialog is for.
2. An area for your content.
3. An area for buttons. These buttons could be anything you need. Some examples would be a “Cancel” button to cancel any actions done in the dialog or an “Okay” button for a confirmation dialog, etc.

Properties

show: boolean

Whether the dialog should be showing. You should be using this to control when the dialog is visible, as opposed to conditionally rendering.

Example

// DO:
<Dialog show={someShowState} onClose={() => setSomeShowState(false)} />

// DON'T:
{someShowState && (<Dialog />)}

---

buttons?: DialogButton[]

---

hideBehaviour?: HideBehaviour

(Optional, defaults to HideBehaviour.Remove) How the dialog handles its children when it’s not shown. If HideBehaviour.Hide, the children of the dialog remain mounted when the dialog is hidden. If HideBehaviour.Remove, the children of the dialog will be unmounted when the dialog is hidden.

Consider setting this to HideBehaviour.Hide if the children of the dialog need to maintain some kind of
state in between separate showings of the dialog.

---

isModal?: boolean

Whether the dialog is a modal. A modal is a dialog that goes on top of the rest of the page in the center of the screen regardless of where it exists in the DOM. Visually, everything behind the modal is darkened. Elements behind the modal cannot be interacted with until the modal is closed.

---

title?: string