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 property. Use this approach for document viewers, record editors, and panels where a static heading is sufficient.
<Window title="Q4 Planning Notes" />The following example demonstrates a Window with a plain text title.
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
DEFAULTstage. - The Restore button appears in the
MINIMIZEDandFULLSCREENstages. - The Close button appears in every stage.
To hide a built-in button, set its minimizeButton, maximizeButton, restoreButton, or closeButton property to a component that returns null.
const HiddenButton = () => null;
<Window minimizeButton={HiddenButton} maximizeButton={HiddenButton} />;The following example hides the Minimize and Maximize buttons and keeps the Close button.
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.
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.
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.
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.
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.