Skip to content

Dialog

A modal window for a focused task. Esc, the close button or a click outside closes it, and focus goes back to the button that opened it.

Sourcecomponents/dialog.tsx

With a form

Long content scrolls inside

Sizes (from sm up)

Usage

Dialog usage
import { Button } from "@/components/button";import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/dialog";import { Field, FieldLabel } from "@/components/field";import { Input } from "@/components/input";
export function DialogUsage() {  return (    <Dialog>      <DialogTrigger render={<Button variant="outline" />}>Edit profile</DialogTrigger>      <DialogContent>        <DialogHeader>          <DialogTitle>Edit profile</DialogTitle>          <DialogDescription>Changes are visible to your team.</DialogDescription>        </DialogHeader>        <DialogBody>          <Field>            <FieldLabel>Name</FieldLabel>            <Input name="name" />          </Field>        </DialogBody>        <DialogFooter>          <DialogClose render={<Button variant="outline" />}>Cancel</DialogClose>          <Button type="submit">Save</Button>        </DialogFooter>      </DialogContent>    </Dialog>  );}

When to use

Use when

A focused task the user starts and finishes in place: edit a record, a short form. Always give it a DialogTitle; primary action last in DialogFooter

Don’t use when

Confirming an irreversible action (use Alert Dialog); long multi-step flows (use a page); messages that need no input (use Alert or a toast)