Dialog

You might be looking for:

• Confirm Dialog

  Yes/no with Cancel and Confirm — no close button.

• Drawer

  An edge panel for inspection.

Playground

<Dialog> <DialogTrigger asChild> <Button variant="outline">Open dialog</Button> </DialogTrigger> <DialogContent> <DialogHeader> <DialogTitle>Archive instrument</DialogTitle> <DialogDescription>Archived instruments are hidden from new orders.</DialogDescription> </DialogHeader> <DialogBody>You can restore an archived instrument at any time.</DialogBody> </DialogContent></Dialog>

Usage

import {
  Dialog,
  DialogBody,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@sophic/portal-ui/components/ui/dialog";

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Open</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Title</DialogTitle>
      <DialogDescription>Description</DialogDescription>
    </DialogHeader>
    <DialogBody>Body content</DialogBody>
  </DialogContent>
</Dialog>

For the common title / description / body / action-buttons shape, prefer the SimpleDialog wrapper exported from the same module — it composes the parts above and handles the footer, dismissability, and close button for you.

For a yes/no decision with Cancel / Confirm and no close button, use Confirm Dialog.

Props

Dialog, DialogTrigger, and DialogClose pass every prop through to their Radix counterparts (open, onOpenChange, asChild, ...). The subcomponents below add props on top.

DialogContent

DialogHeader

DialogFooter

SimpleDialog

Changelog

• 29 September 2026 — Padding steps up. The gap above the footer matches the gap under the heading. width is default (600px) or narrow (450px). Full notes
• 29 September 2026 — Backdrop is transparent/dark/12. Shadow is 0 10px 60px at 10% black. Full notes
• 29 September 2026 — Panel background is the card surface (white on the ivory page). Full notes
• 29 September 2026 — Footer takes bordered (on by default). Full notes
• 24 September 2026 — Body text lines up with the title’s left edge, and the close X sits on that line. Full notes
• 20 August 2026 — Overlay and panel shell in a CSS module. Full notes
• 19 August 2026 — “You might be looking for” map to Drawer. Full notes
• 22 July 2026 — Subtitle stays in the text column (12px gap from close). Full notes
• 15 July 2026 — Base System modal header (title, outline close, divider). Full notes