Window

Window is a portaled, non-modal floating panel you can drag by its title bar and resize from the corner — for tool palettes, pop-out panels, and multi-window dashboards. The page behind stays interactive (aria-modal="false"). Double-click the title bar or use the maximize control to toggle fullscreen, and press Escape to close. Controlled via open/onClose; tune initialPosition, initialSize, resizable, and maximizable.

Example

Preview

import { Window } from '@officina/ui';

<Window
  open={open}
  onClose={() => setOpen(false)}
  title="Inspector"
  initialSize={{ width: 480, height: 360 }}
>
  {/* panel content */}
</Window>;

API

Prop	Type	Default	Description
children*	ReactNode	—	Window body content.
onClose*	() => void	—	Called when the window is closed.
open*	boolean	—	Whether the window is open (controlled).
initialPosition	{ x: number; y: number; }	{ x: 80, y: 80 }	Starting top-left position in pixels.
initialSize	{ width: number; height: number; }	{ width: 480, height: 360 }	Starting size in pixels.
maximizable	boolean	true	Show the maximize control.
minHeight	number	160	Minimum height when resizing.
minWidth	number	280	Minimum width when resizing.
onFocus	() => void	—	Called when the window gains focus (e.g. to raise it).
resizable	boolean	true	Allow the user to resize the window.
zIndex	number	50	Stack order among multiple windows.

Example

API

On this page