• What is KendoReact
  • Getting Started
  • Unstyled Mode
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chart Wizardnew
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Toolsupdated
    • Date Inputs
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChart
    • PDF Processing
    • PDF Viewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheet
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting
Components / Dialogs / API / DialogProps / 

DialogProps

Represents the props of the KendoReact Dialog component.

NameTypeDefaultDescription

appendTo?

any

Defines the container to which the Dialog will be appended. Defaults to body.

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

autoFocus?

boolean

Focus the Dialog container automatically when mounted. By default the autoFocus is false.

autoFocusedElement?

string

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

className?

string

Sets a class of the Dialog DOM element.

closeIcon?

boolean

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

contentStyle?

React.CSSProperties

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

dir?

string

Represents the dir HTML attribute.

height?

string | number

Specifies the height of the Dialog (see example).

id?

string

Sets the aria-labelledby value.

minWidth?

string | number

Specifies the minimum width of the Dialog.

modal?

boolean

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

onClose?

(event: DialogCloseEvent) => void

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

overlayStyle?

React.CSSProperties

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

style?

React.CSSProperties

The styles that are applied to the Dialog.

themeColor?

"primary" | "dark" | "light"

Configures the themeColor of the Dialog.

The available options are:

  • primary
  • dark
  • light

title?

string | ReactElement<any>

Sets the title of the Dialog (see example). If title is not specified, the Dialog does not render a Close button.

width?

string | number

Specifies the width of the Dialog (see example).

In this article

Not finding the help you need?

Contact Support