NativeDialog

Composition preview

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

Usage

import { NativeDialog } from "@/components/ui/native-dialog";
import { Button } from "@/components/ui/button";

<>
<NativeDialog ref={dialogRef} aria-label="Edit details" onCancel={guardUnsavedChanges}>
  <h2>Edit details</h2>
  <Button onClick={() => dialogRef.current?.close()}>Close</Button>
</NativeDialog>
{/* Existing host opens with dialogRef.current?.showModal(). */}
</>

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

API & composition

Native dialog props, ref.showModal(), ref.close(), onCancel, onClose

Usage & accessibility

Composes DialogContent asChild. Native cancellation guards and backdrop styling remain authoritative; do not substitute it for every new dialog.

Implementation contract

src/components/ui/native-dialog.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.