Dialog

A modal dialog built on Base UI Dialog — focus trapping, scroll locking, and Escape / outside-click dismissal handled for you. The squircle panel animates in and out via Base UI’s data-[starting-style] / data-[ending-style] hooks.

Import

import { Dialog } from "@photon/pho-ui/components/dialog";

Usage

<Dialog.Root>
  <Dialog.Trigger render={<Button variant="secondary">Open</Button>} />
  <Dialog.Content title="Delete project" description="This cannot be undone.">
    <div className="mt-4 flex justify-end gap-3">
      <Dialog.Close render={<Button variant="tertiary">Cancel</Button>} />
      <Dialog.Close render={<Button variant="error">Delete</Button>} />
    </div>
  </Dialog.Content>
</Dialog.Root>

Parts

Dialog.Root · Dialog.Trigger · Dialog.Content (portal + backdrop + panel) · Dialog.Title · Dialog.Description · Dialog.Close. For full control, drop down to Dialog.Portal / Dialog.Backdrop / Dialog.Popup.