Titlebar
The 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, or hide the close button entirely.
Setting a Plain Text Title
Set the title property to display a text string in the Dialog titlebar. This is the fastest way to label a confirmation, alert, or informational Dialog.
<kendo-dialog title="Unsaved Changes"></kendo-dialog>The following example demonstrates a confirmation Dialog with a plain text title.
Adding Icons and Custom Content
Use the kendo-dialog-titlebar element to add icons, images, or any Angular component to the titlebar. Nest the custom content directly inside the element.
<kendo-dialog>
<kendo-dialog-titlebar>
<kendo-svg-icon [icon]="envelopeIcon"></kendo-svg-icon> Send Feedback
</kendo-dialog-titlebar>
</kendo-dialog>The following example demonstrates a Dialog with an icon and custom text in the titlebar.
Hiding the Titlebar
When neither title nor kendo-dialog-titlebar is present, the Dialog renders without a titlebar. This suits use cases where the dialog body 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 Dialog lets users dismiss it by clicking the Close button in the title bar or pressing the Esc key. To disable both mechanisms and require users to interact with the action buttons, set the closable property to false.
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.
The following example demonstrates how toggling the closable option affects the titlebar Close button and the Esc key behavior.