DialogSurface

Composition preview

Try DialogSurface alongside its related overlays & menus components. These examples keep all actions local.

Usage

import { DialogSurface } from "@/components/ui/dialog-surface";

<>
{open ? (
  <DialogSurface>
    <div role="dialog" aria-label="Existing task" ref={hostRef}>
      {/* Existing focus management, layout and dismissal stay with the host. */}
    </div>
  </DialogSurface>
) : null}
</>

Composition recipe. Supply application state, handlers and persistence in the owning product component. Inspect the installed source before extending its API.

API & composition

One child carrying its existing ref, ARIA name, classes and event handlers

Usage & accessibility

The host owns mounting, focus trapping and dismissal. Use declarative Dialog for an independent new modal.

Implementation contract

src/components/ui/dialog-surface.tsx

Use named variants and semantic theme tokens. Preserve existing input values, refs, focus and cancellation behavior. Verify keyboard, narrow layouts and pending/error states when behavior changes.