Dialog

Modal overlay displayed above other content.

Documentation
React Aria
Pattern
W3C ARIA
Source
GitHub
Issues
Report
Dialog example
import { Button } from "@/shim-ui/button";
import { Dialog, DialogTrigger } from "@/shim-ui/dialog";
import { Form } from "@/shim-ui/form";
import { TextField } from "@/shim-ui/text-field";

export default () => (
  <DialogTrigger>
    <Button className="self-start">Edit profile</Button>
    <Dialog
      className="max-w-sm"
      description="Edit your profile information."
      title="Edit profile"
    >
      <Form labelPosition="side" size={2}>
        <TextField label="Name" />
        <TextField label="Email" />
        <Button className="self-end" variant="solid">
          Save
        </Button>
      </Form>
    </Dialog>
  </DialogTrigger>
);

Install

Use the CLI or copy the source code manually.

pnpm dlx @kkga/shim add dialog

Controlled open state

Wrap the dialog in a <DialogTrigger> to handle opening. Use the isOpen and onOpenChange props when you need to control the open state programmatically.

Controlled open state example
"use client";
import { useState } from "react";
import { Button } from "@/shim-ui/button";
import { Dialog } from "@/shim-ui/dialog";

export default () => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <>
      <Button className="self-start" onPress={() => setIsOpen(true)}>
        Open dialog
      </Button>
      <Dialog
        className="max-w-sm"
        isOpen={isOpen}
        onOpenChange={(open) => setIsOpen(open)}
        title="Dialog opened"
      >
        <p>Click outside to close the dialog.</p>
      </Dialog>
    </>
  );
};

Accessing uncontrolled state

For uncontrolled dialogs, render children as a function that receives aclose helper. Call close to dismiss the dialog from within the content.

Accessing uncontrolled state example
"use client";
import { Button } from "@/shim-ui/button";
import { Dialog, DialogTrigger } from "@/shim-ui/dialog";
import { Form } from "@/shim-ui/form";
import { TextField } from "@/shim-ui/text-field";

export default () => (
  <DialogTrigger>
    <Button className="self-start">Edit profile</Button>
    <Dialog
      className="max-w-sm"
      description="Edit your profile information."
      title="Edit profile"
    >
      {({ close }) => (
        <Form labelPosition="side" size={2}>
          <TextField label="Name" />
          <TextField label="Email" />
          <div className="flex gap-2 self-end">
            <Button intent="neutral" onPress={close} variant="ghost">
              Cancel
            </Button>
            <Button variant="solid">Save</Button>
          </div>
        </Form>
      )}
    </Dialog>
  </DialogTrigger>
);