Dialog

Guidelines#

Use it for short forms (rename, invite, connect) and previews. Confirmations of irreversible actions use AlertDialog or useConfirm; long or multi-step editing belongs in a Sheet or a page.

What you provide: open/onOpenChange or a DialogTrigger; DialogContent with a DialogHeader (DialogTitle + DialogDescription), the body, and a DialogFooter with the main action last. showCloseButton={false} hides the corner ×.

Anatomy: background surface, border, radius-lg, 24px padding, 16px gap, shadow-lg, max 512px wide from sm (full width minus 32px below it); overlay black at 50%. Footer buttons stack in reverse on phones so the main action sits on top.

Facts#

API#

TypeScript declarations emitted from src/components/ui/dialog.tsx (the module also exports its other parts).

declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): any;
declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): any;
declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): any;
declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): any;
declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): any;
declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
    showCloseButton?: boolean;
}): any;
declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): any;
declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): any;
declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): any;
declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): any;
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  return h(DC.Dialog, { defaultOpen: true },
    h(DC.DialogTrigger, { asChild: true }, h(DC.Button, { variant: "outline" }, "Rename list")),
    h(DC.DialogContent, { onOpenAutoFocus: function (e) { e.preventDefault(); } },
      h(DC.DialogHeader, null,
        h(DC.DialogTitle, null, "Rename list"),
        h(DC.DialogDescription, null, "Everyone in the workspace sees the new name.")),
      h("div", { className: "grid gap-2" },
        h(DC.Label, { htmlFor: "dl" }, "Name"),
        h(DC.Input, { id: "dl", defaultValue: "Fintech CFOs — EMEA" })),
      h(DC.DialogFooter, null,
        h(DC.DialogClose, { asChild: true }, h(DC.Button, { variant: "outline" }, "Cancel")),
        h(DC.Button, null, "Save"))));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Overlays#