Dialog

Root component for a modal dialog. Manages open/closed state and accessibility. Import from "@desk/ui/components/dialog".

Usage

@desk/ui/components/dialog

<Dialog>
  <DialogTrigger asChild>
    <Button emphasis="outline" icon={FolderPlus} tone="neutral">
      Add to palette
    </Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Add to palette</DialogTitle>
      <DialogDescription>
        File Terrazzo Bianco under a palette, or start a new one.
      </DialogDescription>
    </DialogHeader>
    <Text variant="muted">Coastal Kitchen · 12 materials</Text>
    <DialogFooter>
      <DialogClose asChild>
        <Button emphasis="outline" tone="neutral">
          Cancel
        </Button>
      </DialogClose>
      <DialogClose asChild>
        <Button>Add to palette</Button>
      </DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>

Best practices

Use Dialog for a centered blocking modal (form, details, footer actions); a destructive confirm is AlertDialog, an anchored non-blocking panel is Popover.
A panel that slides in from a screen edge is a Sheet (or Drawer for a drag-to-dismiss bottom sheet), not a Dialog.
Always render a DialogTitle (wrap in sr-only if visually hidden) so the modal is announced; DialogContent uses the 36px --radius-modal corner.

Props

DialogContent

Prop	Type	Default	Description
onClickOutside	`(event: InteractOutsideEvent) => void`		Callback when clicking outside the dialog (before `onInteractOutside`).
overlayClassName	`string`		Extra classes for the overlay behind the dialog.
showCloseButton	`boolean`	`true`	Show close button in the top-right corner.

DialogFooter

Prop	Type	Default	Description
justify	`"end" \| "between"`	`"end"`	Button alignment within the footer.

Also exports

componentDialog
constdialogAnatomy
componentDialogClose
componentDialogDescription
componentDialogHeader
componentDialogOverlay
componentDialogPortal
componentDialogTitle
componentDialogTrigger

Anatomy

Dialog

dialog

Modal overlay for focused content

DialogTrigger

dialog-trigger

Button to open the dialog

DialogContent

dialog-content

Main modal container

DialogHeader

dialog-header

Header area

DialogTitle

dialog-title

Modal heading

DialogDescription

dialog-description

Modal description

DialogFooter

dialog-footer

Footer with action buttons

Composition

Used by

Command