Modal

<Dialog>
  <DialogTrigger render={<Button />}>Rename note</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Rename note</DialogTitle>
      <DialogDescription>
        The filename is used as the note title in mrkdwn.
      </DialogDescription>
    </DialogHeader>
    <Input defaultValue="hello-world.md" />
    <DialogFooter>
      <DialogClose render={<Button variant="ghost" />}>Cancel</DialogClose>
      <DialogClose render={<Button />}>Save</DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>

{/* Single button */}
<DialogFooter>
  <DialogClose render={<Button />}>Got it</DialogClose>
</DialogFooter>

{/* Disabled actions */}
<Input value={filename} onChange={(e) => setFilename(e.target.value)} />
<DialogClose render={<Button disabled={filename === initialFilename} />}>
  Save
</DialogClose>

{/* Focus input on open */}
<DialogContent initialFocus={focusRef}>
  <Input ref={focusRef} placeholder="untitled.md" />
</DialogContent>

<DialogContent className="grid-rows-[auto_1fr_auto] p-0 max-h-[70vh]">
  <DialogHeader className="border-b border-separator px-6 py-4">…</DialogHeader>
  <div className="overflow-y-auto px-6 py-4">{/* long content */}</div>
  <DialogFooter className="border-t border-separator px-6 py-4">
    <DialogClose render={<Button />}>Done</DialogClose>
  </DialogFooter>
</DialogContent>