Dialog
A modal window for focused tasks like sharing, quick edits and forms, with a built-in unsaved-changes guard.
Preview
Usage
import { Button } from '@vitnode/core/components/ui/button'
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@vitnode/core/components/ui/dialog'<Dialog>
<DialogTrigger render={<Button variant="outline">Share</Button>} />
<DialogContent>
<DialogHeader>
<DialogTitle>Share this page</DialogTitle>
<DialogDescription>Anyone with the link can read it.</DialogDescription>
</DialogHeader>
<DialogFooter>
<DialogClose render={<Button>Done</Button>} />
</DialogFooter>
</DialogContent>
</Dialog>Always add a DialogTitle. It names the dialog for screen readers.
Forms
Put an AutoForm inside and it renders a Cancel + Submit footer for you. Edit a
field, then press Escape: the dialog asks before throwing your
changes away.
const EditCategoryForm = () => {
const { setOpen } = useDialog()
return (
<AutoForm
fields={fields}
formSchema={formSchema}
onSubmit={async (values) => {
await save(values)
setOpen?.(false)
}}
/>
)
}useDialog() gives children setOpen and setIsDirty. Closing with setOpen
skips the guard, so call it after a successful save. Lazy-load heavy forms
with React.lazy and Suspense.
Long content
Content taller than the screen scrolls inside the dialog. The page behind stays put.
Nested dialogs
Open an Alert Dialog from inside a dialog to confirm a risky step. Closing it brings you back to the first dialog.
Controlled
<Dialog onOpenChange={setOpen} open={open}>
...
</Dialog>onOpenChange receives just the new boolean. Clicking a toast never closes
the dialog underneath.
Dialog or Alert Dialog?
Dialog is for low-stakes tasks and closes on an outside click. Confirming something nobody can undo? Use an Alert Dialog.
Props
Prop
Type