Kumo

@cloudflare/kumo

Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

<Dialog.Root>
  <Dialog.Trigger render={(p) => <Button {...p}>Open Dialog</Button>} />
  <Dialog>
    <Dialog.Title>Welcome</Dialog.Title>
    <Dialog.Description>
      This is a dialog component.
    </Dialog.Description>
  </Dialog>
</Dialog.Root>

Installation

import { Dialog } from "~/components/dialog/dialog";

Usage

import { Dialog } from "~/components/dialog/dialog";
import { Button } from "~/components/button/button";

export default function Example() {
  return (
    <Dialog.Root>
      <Dialog.Trigger render={(p) => <Button {...p}>Open</Button>} />
      <Dialog>
        <Dialog.Title>Dialog Title</Dialog.Title>
        <Dialog.Description>
          Dialog content goes here.
        </Dialog.Description>
        <div className="flex justify-end gap-2 mt-4">
          <Dialog.Close
            render={(p) => (
              <Button variant="secondary" {...p}>
                Close
              </Button>
            )}
          />
        </div>
      </Dialog>
    </Dialog.Root>
  );
}

Examples

Basic Dialog

<Dialog.Root>
  <Dialog.Trigger render={(p) => <Button {...p}>Click me</Button>} />
  <Dialog>
    <Dialog.Title>Hello!</Dialog.Title>
    <Dialog.Description>I'm a dialog.</Dialog.Description>
  </Dialog>
</Dialog.Root>

With Actions

<Dialog.Root>
  <Dialog.Trigger render={(p) => <Button {...p}>Delete</Button>} />
  <Dialog>
    <Dialog.Title>Are you sure?</Dialog.Title>
    <Dialog.Description>
      This action cannot be undone.
    </Dialog.Description>
    <div className="flex gap-2 mt-4">
      <Button variant="destructive">Delete</Button>
      <Dialog.Close render={(p) => (
        <Button variant="secondary" {...p}>
          Cancel
        </Button>
      )} />
    </div>
  </Dialog>
</Dialog.Root>