Welcome UI - Window

import { Window } from 'welcome-ui/Window'

const Example = () => {
  return (
    <>
      <Window.Header>
        <Window.Header.LeftActions isDraggable isExpandable />
        <Window.Header.Title title="My Window Title" />
        <Window.Header.RightActions isClosable>
          {/* eslint-disable-next-line no-console */}
          <Window.Header.Button icon="pen" onClick={() => console.log('edit')} />
        </Window.Header.RightActions>
      </Window.Header>
    </>
  )
}
export default Example

Examples

Use Window and Window.Header to create a structured window layout.

Header

Use Window.Header to create the header section of your window. The header supports various sub-components for flexible layouts.

Title

Use Window.Header.Title to display a title in the header.

Tabs

Use Window.Header.Tabs to display tabs in the header. Requires a tab store and an array of tab items.

Left and Right Actions

Use Window.Header.LeftActions for expandable controls and Window.Header.RightActions for closable controls and custom action buttons.