Titlebar
The Kendo UI for Angular 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.
<kendo-dialog title="Unsaved Changes"></kendo-dialog>The following example demonstrates a confirmation Dialog with a plain text title.
Adding Icons and Custom Content
To add icons, images, or any Angular component to the titlebar, use the kendo-dialog-titlebar element. Nest the custom content directly inside the element. The custom content renders inside the titlebar next to the built-in Close button.
<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. 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. While focus is on the Dialog wrapper, the titlebar Close button, or an action button, users can also dismiss the Dialog by pressing the Esc key.
To remove the button and disable dismissal with the Esc key, set the closable property to false. Provide action buttons so users respond with an explicit decision.
<kendo-dialog title="Terms and Conditions" [closable]="false"></kendo-dialog>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.