Dialog

A modal surface for a focused, self-contained task. Base UI owns the focus trap, focus restore, scroll lock and the aria wiring between the popup, its title and description. Flab adds the visual layer and header/body/footer slots. For irreversible actions, reach for ConfirmDialog instead.

Edit in a dialog

<Dialog>  <DialogTrigger render={<Button variant="primary">Edit customer</Button>} />  <DialogContent>    <DialogHeader>      <DialogTitle>Edit customer</DialogTitle>      <DialogDescription>Update the account owner for Acme Corp.</DialogDescription>    </DialogHeader>    <DialogBody>      <Field>        <FieldLabel>Account owner</FieldLabel>        <FieldControl render={<Input defaultValue="Ada Okafor" />} />      </Field>    </DialogBody>    <DialogFooter>      <DialogClose render={<Button variant="secondary">Cancel</Button>} />      <DialogClose render={<Button variant="primary">Save</Button>} />    </DialogFooter>  </DialogContent></Dialog>

Anatomy

Dialog / DialogTrigger / DialogClose wrap Base UI's root, trigger and close.
DialogContent portals the backdrop and a centered popup, and renders a top-right close button unless hideCloseButton is set.
DialogHeader, DialogTitle, DialogDescription, DialogBody and DialogFooter are the layout slots. Title and description are wired to the popup automatically.

Props

Prop	Type	Default	Notes
`DialogContent hideCloseButton`	`boolean`	`false`	Hide the default top-right close.
`DialogContent initialFocus`	`RefObject \| boolean`	—	Element to focus on open (forwards to Base UI).
`Dialog open / onOpenChange`	`boolean`	—	Controlled open state; uncontrolled by default.