# Titlebar

The Kendo UI for Angular Window titlebar displays the title and the default action buttons. Set a text title, replace the titlebar with custom markup that includes icons, or customize the titlebar buttons.

## Setting a Plain Text Title

Set the [`title`](https://www.telerik.com/kendo-angular-ui/components/dialogs/api/windowcomponent#title) property to display a text string in the Window titlebar. Use this approach for document viewers, record editors, and panels where a static heading is sufficient.

```html
<kendo-window title="Q4 Planning Notes"></kendo-window>
```

The following example demonstrates a Window with meeting notes and a plain text title.

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

## Managing Titlebar Actions

The Kendo UI for Angular Window titlebar displays the built-in **Minimize**, **Maximize**, **Restore**, and **Close** buttons. The buttons that appear depend on the state of the Window:

* The **Minimize** and **Maximize** buttons appear in the default state.
* The **Restore** button appears when the Window is minimized or maximized.
* The **Close** button appears in every state.

Each built-in button comes from its action directive: [`kendoWindowMinimizeAction`](https://www.telerik.com/kendo-angular-ui/components/dialogs/api/windowminimizeactiondirective), [`kendoWindowMaximizeAction`](https://www.telerik.com/kendo-angular-ui/components/dialogs/api/windowmaximizeactiondirective), [`kendoWindowRestoreAction`](https://www.telerik.com/kendo-angular-ui/components/dialogs/api/windowrestoreactiondirective), and [`kendoWindowCloseAction`](https://www.telerik.com/kendo-angular-ui/components/dialogs/api/windowcloseactiondirective). When you define a custom [`kendo-window-titlebar`](https://www.telerik.com/kendo-angular-ui/components/dialogs/api/windowtitlebarcomponent), the Window renders only the buttons whose directives you include. To hide a button, leave its directive out of the titlebar.

```html Template
<kendo-window title="Status">
  <kendo-window-titlebar>
    <span class="k-window-title">Status</span>
    <button kendoWindowCloseAction aria-label="Close"></button>
  </kendo-window-titlebar>
</kendo-window>
```

The following example hides the **Minimize** and **Maximize** buttons and keeps the **Close** button.

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

## Adding Icons and Custom Actions

Use the [`kendo-window-titlebar`](https://www.telerik.com/kendo-angular-ui/components/dialogs/api/windowtitlebarcomponent) component to add icons and custom HTML. A custom titlebar replaces the default controls, so include the action directives you want to keep, such as [`kendoWindowMinimizeAction`](https://www.telerik.com/kendo-angular-ui/components/dialogs/api/windowminimizeactiondirective), [`kendoWindowMaximizeAction`](https://www.telerik.com/kendo-angular-ui/components/dialogs/api/windowmaximizeactiondirective), [`kendoWindowRestoreAction`](https://www.telerik.com/kendo-angular-ui/components/dialogs/api/windowrestoreactiondirective), and [`kendoWindowCloseAction`](https://www.telerik.com/kendo-angular-ui/components/dialogs/api/windowcloseactiondirective).

The following template and component property show how to include a custom icon with the default **Maximize**, **Restore**, and **Close** controls.

```html Template
<kendo-window>
    <kendo-window-titlebar>
        <span class="k-window-title">
            <kendo-svg-icon [icon]="userIcon"></kendo-svg-icon> Edit Contact
        </span>
        <button kendoWindowMaximizeAction></button>
        <button kendoWindowRestoreAction></button>
        <button kendoWindowCloseAction></button>
    </kendo-window-titlebar>
</kendo-window>
```

```ts Component
import { userIcon } from '@progress/kendo-svg-icons';

export class AppComponent {
    public userIcon = userIcon;
}
```

The following example demonstrates a contact editor Window with an icon in the titlebar and the built-in Maximize, Restore, and Close controls.

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

To add a custom action to the titlebar, place a `kendoButton` inside the `kendo-window-titlebar` element and handle its `click` event in your application.

```html Template
<kendo-window>
  <kendo-window-titlebar>
    <span class="k-window-title">Browse Project Files</span>
    <button kendoButton fillMode="flat" [svgIcon]="folderIcon" (click)="onClick()"></button>
    <button kendoWindowCloseAction></button>
  </kendo-window-titlebar>
</kendo-window>
```

```ts Component
import { folderIcon } from '@progress/kendo-svg-icons';

export class AppComponent {
    public folderIcon = folderIcon;
    public onClick(): void {}
}
```

The following example adds an **Open folder** action alongside the built-in Window controls.

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

## Hiding the Title Text

When [`title`](https://www.telerik.com/kendo-angular-ui/components/dialogs/api/windowcomponent#title) is not set and no `kendo-window-titlebar` is defined, the Window shows the default action buttons but no title text. Use this layout when the window content serves as its own heading.

The following example shows a Window without visible title text and uses `aria-label` to provide an accessible name.

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

## See Also

* [Setting the Window Title through the Angular Service](https://www.telerik.com/kendo-angular-ui/components/dialogs/window/service#getting-started)
* [API Reference of the WindowComponent](https://www.telerik.com/kendo-angular-ui/components/dialogs/api/windowcomponent)
* [API Reference of the WindowTitleBarComponent](https://www.telerik.com/kendo-angular-ui/components/dialogs/api/windowtitlebarcomponent)