New to KendoReact? Start a free 30-day trial

DialogProps

Interface

Represents the props of the KendoReact Dialog component.

Definition

Package:@progress/kendo-react-dialogs

Properties

appendTo?

any

Defines the container to which the Dialog will be appended.

If set to null the Dialog will be rendered without React Portal.

Default:

document.body

Example:

jsx

<Dialog appendTo={document.getElementById('container')} />

autoFocus?

boolean

Set the focus the Dialog container automatically when mounted.

Default:

false

Example:

jsx

<Dialog autoFocus={true} />

autoFocusedElement?

string

Specifies the query selector used to set the initial focus (see examples).

Example:

jsx

<Dialog autoFocusedElement="#input-id" />

className?

string

Sets a class of the Dialog DOM element.

Example:

jsx

<Dialog className="custom-class" />

closeIcon?

boolean

Specifies whether a close button should be rendered at the top corner of the dialog.

Default:

true

Example:

jsx

<Dialog closeIcon={true} />

contentStyle?

CSSProperties

The styles that are applied to the content of the Dialog.

Example:

jsx

<Dialog contentStyle={{ padding: '20px' }} />

dir?

string

Represents the dir HTML attribute.

Example:

jsx

<Dialog dir="rtl" />

height?

string | number

Specifies the height of the Dialog (see example).

Example:

jsx

<Dialog height="300px" />

id?

string

Sets the aria-labelledby value.

Example:

jsx

<Dialog id="dialog-id" />

minWidth?

string | number

Specifies the minimum width of the Dialog.

Example:

jsx

<Dialog minWidth="200px" />

boolean

Specifies if the Dialog will be modal by rendering an overlay under the component.

Default:

true

Example:

jsx

<Dialog modal={false} />

onClose?

(event: DialogCloseEvent) => void

Fires when the Close button in the title is clicked or when the Esc button is pressed.

Parameters:eventDialogCloseEvent

Example:

jsx

<Dialog onClose={(event) => console.log(event)} />

overlayStyle?

CSSProperties

Set styles to the Dialog overlay element rendered when the modal prop is enabled.

Example:

jsx

<Dialog overlayStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }} />

style?

CSSProperties

The styles that are applied to the Dialog.

Example:

jsx

<Dialog style={{ border: '1px solid black' }} />

title?

string | ReactElement<any, string | JSXElementConstructor<any>>

Sets the title of the Dialog (see example). If you do not specify the title, the Dialog does not render a Close button.

Example:

jsx

<Dialog title="Dialog Title" />

webMcp?

boolean | WebMcpProps

Enables Web MCP tool registration for this component. Requires a parent WebMcpProvider from @progress/kendo-react-webmcp.

width?

string | number

Specifies the width of the Dialog (see example).

Example:

jsx

<Dialog width="400px" />