Dialog

Low-level overlay primitive: a portalled, scroll-locked backdrop with a focus-trapped, centered panel. DialogPanel is the white rounded content container placed inside it.

When to use

Dialog is the lowest-level overlay in the family and expects Floating UI plumbing (context, getFloatingProps, a floating ref). Most code should not use it directly — reach for Modal / openModal (@uxf/ui/modal), which wraps Dialog, supplies that plumbing, and adds a controlled isOpen / onClose API plus the modal stack.

Use Dialog (or the useDialog hook) directly only for a bespoke overlay outside the modal stack. Use DialogPanel wherever you need the standard panel container — it is the usual child of a Modal.

Usage

The useDialog hook wires up Floating UI and returns everything Dialog needs. It lives in the same file but is not re-exported from index.ts, so import it from the file directly:

import { Button } from "@uxf/ui/button";
import { useDialog } from "@uxf/ui/dialog/dialog";

function Example() {
    const { openDialog, DialogProvider, closeDialog } = useDialog();

    return (
        <>
            <Button onClick={() => openDialog(<Button onClick={closeDialog}>Close</Button>)}>Open</Button>
            <DialogProvider />
        </>
    );
}

DialogPanel gives content the standard panel styling and width:

import { DialogPanel } from "@uxf/ui/dialog";

<DialogPanel width="sm">Panel content</DialogPanel>;

Props

Dialog

Imported from @uxf/ui/dialog.

DialogPanel

Imported from @uxf/ui/dialog.

Variants & states

DialogVariant: default, drawer-right (right-anchored drawer on sm screens and up).

DialogPanelWidth maps to a max-width:

Requirements

Import the component stylesheet once in your global CSS:

@import url("@uxf/ui/css/dialog.css");

Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.