# 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`](https://www.telerik.com/kendo-angular-ui/components/dialogs/api/dialogcomponent#title) property. This is the fastest way to label a confirmation, alert, or informational Dialog.

```html
<kendo-dialog title="Unsaved Changes"></kendo-dialog>
```

The following example demonstrates a confirmation Dialog with a plain text title.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dialogs/dialog/title/title-property/source.txt)

## Adding Icons and Custom Content

To add icons, images, or any Angular component to the titlebar, use the [`kendo-dialog-titlebar`](https://www.telerik.com/kendo-angular-ui/components/dialogs/api/dialogtitlebarcomponent) element. Nest the custom content directly inside the element. The custom content renders inside the titlebar next to the built-in **Close** button.

```HTML
<kendo-dialog>
    <kendo-dialog-titlebar>
        <kendo-svg-icon [icon]="envelopeIcon"></kendo-svg-icon> Send Feedback
    </kendo-dialog-titlebar>
</kendo-dialog>
```

```TS
import { envelopeIcon } from '@progress/kendo-svg-icons';

public envelopeIcon = envelopeIcon;
```

The following example demonstrates a Dialog with an icon and custom text in the titlebar.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dialogs/dialog/title/titlebar-component/source.txt)

## Hiding the Titlebar

When neither [`title`](https://www.telerik.com/kendo-angular-ui/components/dialogs/api/dialogcomponent#title) nor [`kendo-dialog-titlebar`](https://www.telerik.com/kendo-angular-ui/components/dialogs/api/dialogtitlebarcomponent) 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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dialogs/dialog/title/no-title/source.txt)

## 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`](https://www.telerik.com/kendo-angular-ui/components/dialogs/api/dialogcomponent#closable) property to `false`. Provide [action buttons](https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/action-buttons) so users respond with an explicit decision.

```html
<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`](https://www.telerik.com/kendo-angular-ui/components/dialogs/api/dialogcomponent#closable) option affects the titlebar **Close** button and the `Esc` key behavior.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dialogs/dialog/closable/source.txt)

## Suggested Links

* [Setting the Dialog Title through Angular Service](https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/service#getting-started)
* [Dialog Close Prevention through Angular Service](https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/service#dialog-close-prevention)
* [Dialog Action Buttons](https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/action-buttons)
* [Dialog Events](https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/events)
* [Dialog Visibility](https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/visibility)
* [API Reference of the DialogComponent](https://www.telerik.com/kendo-angular-ui/components/dialogs/api/dialogcomponent)
* [API Reference of the DialogTitleBarComponent](https://www.telerik.com/kendo-angular-ui/components/dialogs/api/dialogtitlebarcomponent)