# Titlebar

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

## Setting a Plain Text Title

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

```vue
<Window :title="'Q4 Planning Notes'" />
```

The following example demonstrates a Window with a plain text title.

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

## Managing Titlebar Actions

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

* The **Minimize** and **Maximize** buttons appear in the `DEFAULT` stage.
* The **Restore** button appears in the `MINIMIZED` and `FULLSCREEN` stages.
* The **Close** button appears in every stage.

To hide a built-in button, set its [`minimizeButton`](https://www.telerik.com/kendo-vue-ui-develop/components/dialogs/api/windowprops#minimizebutton), [`maximizeButton`](https://www.telerik.com/kendo-vue-ui-develop/components/dialogs/api/windowprops#maximizebutton), [`restoreButton`](https://www.telerik.com/kendo-vue-ui-develop/components/dialogs/api/windowprops#restorebutton), or [`closeButton`](https://www.telerik.com/kendo-vue-ui-develop/components/dialogs/api/windowprops#closebutton) property to a function that returns `null`.

```vue
<Window :minimize-button="() => null" />
```

The following example hides the **Minimize**, **Maximize**, and **Close** buttons. The Window closes through its **Cancel** and **Submit** buttons.

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

## Adding Icons and Custom Actions

The `title` property accepts a plain string. To add an icon, a status badge, or other custom markup next to the title text, use the [`titleRender`](https://www.telerik.com/kendo-vue-ui-develop/components/dialogs/api/windowprops#titlerender) property. Set it to the name of a named slot or to a render function. The Window keeps the default action buttons in the titlebar.

```vue
<Window :title-render="'myTemplate'">
  <template #myTemplate>
    <Title />
  </template>
</Window>
```

The following example demonstrates a Window with a custom title component.

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

To replace a built-in button with your own content, set its property to the name of a named slot. The slot receives `props.onClick`, so the custom button can trigger the built-in behavior.

```vue
<Window :close-button="'closeButton'">
  <template #closeButton="{ props }">
    <KButton :fill-mode="'flat'" @click="props.onClick">Done</KButton>
  </template>
</Window>
```

The following example replaces the **Close** button with a flat **Done** button and hides the **Minimize** button.

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

To add buttons with your own commands at the bottom of the Window, see [Action Buttons](https://www.telerik.com/kendo-vue-ui-develop/components/dialogs/window/action-buttons).

## Hiding the Title Text

When the `title` property is not set, the Window displays a titlebar with the default action buttons but no title text. Use this layout when the window content serves as its own heading, such as a media preview or a form that starts with a visible heading.

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

## See Also

* [Action Buttons](https://www.telerik.com/kendo-vue-ui-develop/components/dialogs/window/action-buttons)
* [API Reference of the Window](https://www.telerik.com/kendo-vue-ui-develop/components/dialogs/api/windowprops)