Dialog

TS

import { … } from "@fungi.computer/caps/components/dialog";

Hero

TSX

import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@fungi.computer/caps/components/dialog";

export default function Hero() {
  return (
    <Dialog>
      <DialogTrigger>Clear the hollow</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Clear this patch?</DialogTitle>
          <DialogDescription>
            It drops off the map for everyone who follows this trail.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose>Cancel</DialogClose>
          <DialogClose>Clear it</DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Open inline

TSX

import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@fungi.computer/caps/components/dialog";
import { useState } from "react";

export default function OpenInline() {
  const [host, setHost] = useState<HTMLDivElement | null>(null);
  return (
    <div
      className="relative h-48 w-80 overflow-hidden rounded-box border border-base-300 bg-base-200"
      ref={setHost}
    >
      <Dialog defaultOpen modal={false}>
        <DialogContent
          className="absolute inset-x-sm top-sm w-auto max-w-none translate-x-0 translate-y-0 space-y-sm"
          container={host}
          finalFocus={false}
        >
          <DialogHeader>
            <DialogTitle>Chanterelle patch</DialogTitle>
            <DialogDescription>Found near the creek bend.</DialogDescription>
          </DialogHeader>
          <DialogClose>Close</DialogClose>
        </DialogContent>
      </Dialog>
    </div>
  );
}

Destructive

TSX

import { Button } from "@fungi.computer/caps/components/button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@fungi.computer/caps/components/dialog";

export default function Destructive() {
  return (
    <Dialog>
      <DialogTrigger render={<Button variant="destructive" />}>
        Delete patch
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Delete this patch?</DialogTitle>
          <DialogDescription>This can't be undone.</DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose render={<Button variant="outline" />}>
            Keep it
          </DialogClose>
          <DialogClose render={<Button variant="destructive" />}>
            Delete
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Props

DialogProps

Prop	Type	Description
interactionOwner?	"host" | "local"

• interactionOwner?"host" | "local"

DialogProps

Prop	Type	Description
Payload	unknown

• Payloadunknown

Full types: API reference.