Implementation:OpenHands OpenHands Dialog

Knowledge Sources	OpenHands
Domains	UI_Components, React
Last Updated	2026-02-11 21:00 GMT

Overview

A modal dialog component built on @floating-ui/react with focus trapping and animated transitions.

Description

The Dialog component renders a modal overlay that centers content on screen with a backdrop. It is built on @floating-ui/react for positioning and interaction management, and includes a focus trap to ensure keyboard navigation stays within the dialog while it is open. Open and close transitions are animated over 200ms for a smooth user experience. The component is controlled via open and onOpenChange props, giving the parent full control over visibility state. The source file is 96 lines long.

Usage

Use the Dialog for confirmations, form inputs, alerts, or any content that requires the user's focused attention before they can return to the main interface. It is appropriate when content should interrupt the normal workflow and require explicit dismissal.

Code Reference

Source Location

openhands-ui/components/dialog/Dialog.tsx (96 lines)

Signature

interface DialogProps {
  open: boolean;
  onOpenChange(value: boolean): void;
  children: React.ReactNode;
}

Import

import { Dialog } from "@openhands/ui";

I/O Contract

Inputs (Props)

Prop	Type	Required	Default	Description
`open`	`boolean`	Yes	—	Controls whether the dialog is currently visible.
`onOpenChange`	`(value: boolean) => void`	Yes	—	Callback invoked when the dialog should open or close (e.g., backdrop click, Escape key).

Outputs

When open is true, renders a modal overlay with a backdrop, a centered content container with focus trapping, and 200ms enter/exit transitions. When open is false, the dialog is unmounted from the DOM after the exit transition completes.

Usage Examples

import { Dialog } from "@openhands/ui";
import { Button } from "@openhands/ui";
import { useState } from "react";

function ConfirmDelete() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Delete Item</Button>
      <Dialog open={open} onOpenChange={setOpen}>
        <h2>Confirm Deletion</h2>
        <p>Are you sure you want to delete this item? This action cannot be undone.</p>
        <div>
          <Button variant="secondary" onClick={() => setOpen(false)}>Cancel</Button>
          <Button variant="primary" onClick={() => { /* delete logic */ setOpen(false); }}>
            Delete
          </Button>
        </div>
      </Dialog>
    </>
  );
}

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment