Titlebar
The KendoReact Dialog titlebar displays a title and a built-in Close button. You can set a plain text title, replace the titlebar content with icons or custom components, hide the titlebar, or hide the Close button.
Setting a Plain Text Title
To display a text string in the Dialog titlebar, set the title property. This is the fastest way to label a confirmation, alert, or informational Dialog.
<Dialog title="Unsaved Changes" />The following example demonstrates a Dialog with a plain text title.
Adding Icons and Custom Content
To add icons, images, or any React component to the titlebar, pass a React element to the title property. The element renders inside the titlebar next to the built-in Close button.
<Dialog
title={
<span>
<SvgIcon icon={printIcon} /> Print this page
</span>
}
/>The following example demonstrates a Dialog with an icon and custom text in the titlebar.
Hiding the Titlebar
If you do not specify the title property, the Dialog renders without a titlebar. As a result, the Dialog also does not render a Close button. This suits use cases where the Dialog content provides its own visual context—such as marketing overlays or media prompts.
The following example demonstrates a Dialog without a titlebar.
Hiding the Close Button
By default, the titlebar renders a Close button. To remove it, set the closeIcon property to false.
<Dialog title="Terms and Conditions" closeIcon={false} />The closeIcon property controls only the visibility of the button. The onClose event still fires when the user presses Esc and an onClose handler is attached. To require an explicit decision, do not hide the Dialog in the event handler, and provide action buttons for the user to respond with.
Use this feature when a dismissal without a decision is not acceptable, for example:
- Accepting terms and conditions before proceeding.
- Confirming or canceling a destructive action such as deleting a record.
- Completing a required step in a wizard or multi-step workflow.
- Acknowledging a critical system message that requires an explicit response.