Dialog
A modal overlay for focused tasks.
Overview
A dialog is a modal overlay that interrupts the page for a focused task or
confirmation. Compose it from DialogTrigger, DialogContent, DialogHeader,
DialogTitle, DialogDescription, and DialogFooter.
$ npx morpha-ui add dialogInstallation
Morpha UI components are distributed via the Morpha CLI (coming in a later
step): npx morpha-ui add dialog. In the meantime, since this is the base
shadcn component, you can also add it directly:
npx shadcn@latest add dialogAPI Reference
The table documents the Dialog root. The parts — DialogTrigger,
DialogContent, DialogHeader, DialogFooter, DialogTitle,
DialogDescription, and DialogClose — forward their Radix props.
Prop
Type
Accessibility
- A
DialogTitleis required (usesr-onlyif you don't want it shown) so the dialog has an accessible name. - Focus is trapped while open and restored on close; Esc dismisses the dialog (handled by Radix).
- Link explanatory text with
DialogDescription.
The dialog content is rendered in a portal on document.body, so inside the
preview it follows the site theme rather than the frame's light/dark toggle.