Children can be a string, node or a function accepting `({ close })`. When passing a string, <Paragraph /> is used to wrap the string.

The intent of the Dialog. Used for the button.

When true, the dialog is shown.

Title of the Dialog. Titles should use Title Case.

When true, the header with the title and close icon button is shown.

You can override the default header with your own custom component. This is useful if you want to provide a custom header and footer, while also enabling your Dialog's content to scroll. Header can either be a React node or a function accepting `({ close })`.

When true, the footer with the cancel and confirm button is shown.

You can override the default footer with your own custom component. This is useful if you want to provide a custom header and footer, while also enabling your Dialog's content to scroll. Footer can either be a React node or a function accepting `({ close })`.

When true, the cancel button is shown.

When true, the close button is shown

Function that will be called when the exit transition is complete.

Function that will be called when the enter transition is complete.

Function that will be called when the confirm button is clicked. This does not close the Dialog. A close function will be passed as a paramater you can use to close the dialog. `onConfirm={(close) => close()}`

Label of the confirm button.

When true, the confirm button is set to loading.

When true, the confirm button is set to disabled.

Function that will be called when the cancel button is clicked. This closes the Dialog by default. `onCancel={(close) => close()}`

Label of the cancel button.

Controls whether the overlay should automatically try to bring focus inside. @default true

Boolean indicating if clicking the overlay should close the overlay. @default true

Boolean indicating if pressing the esc key should close the overlay. @default true

Width of the Dialog.

The space above the dialog. This offset is also used at the bottom when there is not enough vertical space available on screen — and the dialog scrolls internally.

The space on the left/right sides of the dialog when there isn't enough horizontal space available on screen.

The min height of the body content. Makes it less weird when only showing little content.

Props that are passed to the dialog container.

Props that are passed to the content container.

Whether or not to prevent scrolling in the outer body @default false

Props that are passed to the Overlay component.