# Titlebar

The KendoReact 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-react-ui-develop/components/dialogs/api/windowprops#title) property. Use this approach for document viewers, record editors, and panels where a static heading is sufficient.

```jsx
<Window title="Q4 Planning Notes" />
```

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

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

## Managing Titlebar Actions

The KendoReact 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-react-ui-develop/components/dialogs/api/windowprops#minimizebutton), [`maximizeButton`](https://www.telerik.com/kendo-react-ui-develop/components/dialogs/api/windowprops#maximizebutton), [`restoreButton`](https://www.telerik.com/kendo-react-ui-develop/components/dialogs/api/windowprops#restorebutton), or [`closeButton`](https://www.telerik.com/kendo-react-ui-develop/components/dialogs/api/windowprops#closebutton) property to a component that returns `null`.

```jsx
const HiddenButton = () => null;

<Window minimizeButton={HiddenButton} maximizeButton={HiddenButton} />;
```

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

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

## Adding Icons and Custom Actions

The `title` property accepts a React node, so the titlebar can show more than plain text. Pass a component to add an icon, a status badge, or other custom markup next to the title text. The Window keeps the default action buttons in the titlebar.

```jsx
const TitleComponent = () => (
    <div>
        <SvgIcon icon={printIcon} /> Print this page
    </div>
);

<Window title={<TitleComponent />} />;
```

The following example demonstrates a Window with an icon in the titlebar.

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

To replace a built-in button with your own component, pass a component to its property. The Window passes the `onClick` handler and the current `stage` to the component, so the custom button can trigger the built-in behavior.

```jsx
const CustomCloseButton = (props) => (
    <Button fillMode="flat" onClick={props.onClick} aria-label="Close window">
        Done
    </Button>
);

<Window closeButton={CustomCloseButton} />;
```

To add buttons with your own commands at the bottom of the Window, see [Action Buttons](https://www.telerik.com/kendo-react-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-react-ui/dialogs/window/title-no/func/source.txt)

## See Also

* [Action Buttons](https://www.telerik.com/kendo-react-ui-develop/components/dialogs/window/action-buttons)
* [Learn about KendoReact Free](https://www.telerik.com/kendo-react-ui-develop/components/getting-started/free-vs-premium)
* [API Reference of the Window](https://www.telerik.com/kendo-react-ui-develop/components/dialogs/api/windowprops)