Dialog

Change the name and press Esc: the dialog asks before throwing your edit away. Press Cmd/Ctrl+Enter from the field to save.

InstallationCopy Anchor Link

npx shadcn@latest add @quireui/dialog

UsageCopy Anchor Link

<Dialog open={open} onOpenChange={setOpen} dirty={name !== original}>
  <DialogTrigger render={<Button />}>Rename project</DialogTrigger>
  <DialogContent size="sm">
    <DialogForm onFormSubmit={save}>
      <DialogHeader>
        <DialogTitle>Rename project</DialogTitle>
        <DialogDescription>Only visible to people in this workspace.</DialogDescription>
      </DialogHeader>
      <DialogBody>{/* fields */}</DialogBody>
      <DialogFooter>
        <DialogClose render={<Button variant="ghost" />}>Cancel</DialogClose>
        <Button type="submit" variant="primary">Save</Button>
      </DialogFooter>
    </DialogForm>
  </DialogContent>
</Dialog>

SizesCopy Anchor Link

size on DialogContent: sm, md (default), lg or full. For panels from the edge of the screen, use Sheet.

Sticky header and footerCopy Anchor Link

Only DialogBody scrolls, so the title and the buttons stay in view on long content. It is a Scroll area: a slim scrollbar while scrolling and soft fades where there is more to read.

Unsaved changesCopy Anchor Link

Pass dirty while there are unsaved edits. Esc, an outside click or the close button then show "Discard unsaved changes?" at the bottom of the dialog instead of closing. Focus goes to "Keep editing", and Esc again keeps editing. Set dirty back to false after saving. Change the wording with dirtyMessage.

AccessibilityCopy Anchor Link

It is a modal dialog, named by DialogTitle and described by DialogDescription, and the page behind it is hidden from screen readers while it is open. The close button is named "Close", and the unsaved-changes bar is an alert, so it is read out when it appears.

• The first field is focused when the dialog opens.
• Cmd/Ctrl+Enter submits the dialog's form from any field, including a textarea where Enter adds a new line.
• DialogForm validates its fields with the same messages as Input.

StackingCopy Anchor Link

A dialog opened from inside another one stacks on top, and the one behind steps back so the depth is clear.

For a destructive confirm, use Alert dialog.

API referenceCopy Anchor Link