# Titlebar

The KendoReact 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-react-ui/components/dialogs/api/dialogprops#title) property. This is the fastest way to label a confirmation, alert, or informational Dialog.

```jsx
<Dialog title="Unsaved Changes" />
```

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

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

## Adding Icons and Custom Content

To add icons, images, or any React component to the titlebar, pass a React element to the [`title`](https://www.telerik.com/kendo-react-ui/components/dialogs/api/dialogprops#title) property. The element renders inside the titlebar next to the built-in **Close** button.

```jsx
<Dialog
    title={
        <span>
            <SvgIcon icon={printIcon} /> Print this page
        </span>
    }
/>
```

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

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

## Hiding the Titlebar

If you do not specify the [`title`](https://www.telerik.com/kendo-react-ui/components/dialogs/api/dialogprops#title) property, 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-react-ui/dialogs/dialog/title/no-title/func/source.txt)

## Hiding the Close Button

By default, the titlebar renders a **Close** button. To remove it, set the [`closeIcon`](https://www.telerik.com/kendo-react-ui/components/dialogs/api/dialogprops#closeicon) property to `false`.

```jsx
<Dialog title="Terms and Conditions" closeIcon={false} />
```

The `closeIcon` property controls only the visibility of the button. The [`onClose`](https://www.telerik.com/kendo-react-ui/components/dialogs/api/dialogprops#onclose) event still fires when the user presses `Esc` and an `onClose` handler is attached. To require an explicit decision, do not hide the Dialog in the event handler, and provide [action buttons](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog/action-buttons) for the user to respond with.

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.

## Suggested Links

* [Dialog Action Buttons](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog/action-buttons)
* [Dialog Events](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog/events)
* [Dialog Visibility](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog/visibility)
* [API Reference of the Dialog](https://www.telerik.com/kendo-react-ui/components/dialogs/api/dialog)
* [DialogProps API Reference](https://www.telerik.com/kendo-react-ui/components/dialogs/api/dialogprops)