Delphi Design

A modal dialog component for important interactions that require user attention.

Basic

Default

Confirmation

Variants

With Form

Hide Close Button

Usage

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  Button
} from "@delphi/ui";

export function Example() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Open Dialog</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Dialog Title</DialogTitle>
          <DialogDescription>
            A description of what this dialog does.
          </DialogDescription>
        </DialogHeader>
        <div className="py-4">
          {/* Dialog body content */}
        </div>
        <DialogFooter>
          <Button variant="outline">Cancel</Button>
          <Button>Continue</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Controlled Dialog

import { useState } from "react";
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
  Button
} from "@delphi/ui";

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

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button>Open Controlled Dialog</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Controlled Dialog</DialogTitle>
        </DialogHeader>
        <p>This dialog's state is controlled externally.</p>
        <DialogFooter>
          <Button onClick={() => setOpen(false)}>Close</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Force Visible (Non-dismissible)

import { useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
  Button
} from "@delphi/ui";

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

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button>Force Visible Dialog</Button>
      </DialogTrigger>
      <DialogContent forceVisible>
        <DialogHeader>
          <DialogTitle>Cannot Dismiss</DialogTitle>
        </DialogHeader>
        <p>This dialog cannot be closed by clicking outside or pressing ESC.</p>
        <DialogFooter>
          <Button onClick={() => setOpen(false)}>Close Dialog</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

API Reference

Prop	Type	Default	Description
`open`	`boolean`	-	Controlled open state
`onOpenChange`	`(open: boolean) => void`	-	Callback when open state changes
`modal`	`boolean`	`true`	Whether the dialog is modal

DialogContent Props

Prop	Type	Default	Description
`forceVisible`	`boolean`	`false`	Prevents dismissing by clicking outside or pressing ESC
`hideCloseButton`	`boolean`	`false`	Hides the default close button
`className`	`string`	-	Additional CSS classes

Use dialogs for important actions that require user confirmation

Always include a clear title and description

Provide a way to dismiss the dialog (close button or cancel action)

Focus the first interactive element when the dialog opens

Return focus to the trigger element when the dialog closes

Use DialogDescription for screen reader context

Use dialogs for non-essential information — consider inline alerts instead

Stack multiple dialogs on top of each other

Make dialogs too large or contain excessive content

Use forceVisible unless absolutely necessary for critical flows