components

Dialog

A dialog is an interruption — reserve it for moments where the user must complete the task before anything else makes sense. Everything else goes in a popover or a page.

Read the full spec

Trigger and content

Wire any element as the trigger with `DialogTrigger asChild`. The dialog traps focus and is dismissible with Escape or the scrim.

tsx

<Dialog>
  <DialogTrigger asChild>
    <Button>Open dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Share area</DialogTitle>
      <DialogDescription>
        Invite a teammate to this monitored area.
      </DialogDescription>
    </DialogHeader>
    …
    <DialogFooter>
      <Button variant="ghost">Cancel</Button>
      <Button>Send invite</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Controlled

Pass `open` and `onOpenChange` to drive the dialog from state. Useful when the dialog is triggered from multiple places or by network events.

tsx

const [open, setOpen] = useState(false);

<Button onClick={() => setOpen(true)}>Open</Button>
<Dialog open={open} onOpenChange={setOpen}>...</Dialog>