Electron Window Titlebar Component

Custom window titlebar implementation for Electron applications that provides:

  • Draggable region for window movement
  • Window control buttons (minimize, maximize, close)
  • Optional title display with proper styling

This component creates a native-like window experience in frameless Electron windows, allowing users to drag the application and access standard window controls while maintaining a custom look and feel that integrates with the application design.

Features:

  • CSS-based window dragging utilizing Electron's -webkit-app-region
  • Customizable title content (text or components)
  • Complete window control buttons with hover states
  • Accessible button implementations with proper ARIA attributes

Implementation details:

  • Uses helper functions to communicate with Electron's window API
  • SVG icons for consistent cross-platform appearance
  • Custom hover states for window controls matching platform conventions

Interfaces

DragWindowRegionProps

Functions

dragWindowRegion