Dialog

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

Import

import { Dialog } from '@akitectio/aki-ui'

Basic Usage

Dialog Title

This is a dialog. You can put any content here.

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

<button
  onClick={() => setOpen(true)}
  className="bg-black text-white px-4 py-2 rounded text-sm hover:bg-gray-800"
>
  Open Dialog
</button>
<Dialog open={open} onOpenChange={setOpen}>
  <div className="p-6">
    <h2 className="text-lg font-semibold mb-2">Dialog Title</h2>
    <p className="text-sm text-gray-600 mb-4">
      This is a dialog. You can put any content here.
    </p>
    <div className="flex gap-2 justify-end">
      <button
        onClick={() => setOpen(false)}
        className="px-4 py-2 text-sm border rounded hover:bg-gray-50"
      >
        Cancel
      </button>
      <button
        onClick={() => setOpen(false)}
        className="px-4 py-2 text-sm bg-black text-white rounded hover:bg-gray-800"
      >
        Confirm
      </button>
    </div>
  </div>
</Dialog>

Custom Content

Dialog can contain any content including forms, lists, or complex layouts.

<Dialog open={open} onOpenChange={setOpen}>
  <div className="p-6">
    <h2 className="text-lg font-semibold mb-4">User Profile</h2>
    <form className="space-y-4">
      <div>
        <label className="block text-sm font-medium mb-1">Name</label>
        <input
          type="text"
          className="w-full px-3 py-2 border rounded"
          placeholder="Enter your name"
        />
      </div>
      <div>
        <label className="block text-sm font-medium mb-1">Email</label>
        <input
          type="email"
          className="w-full px-3 py-2 border rounded"
          placeholder="Enter your email"
        />
      </div>
      <div className="flex gap-2 justify-end">
        <button
          type="button"
          onClick={() => setOpen(false)}
          className="px-4 py-2 text-sm border rounded hover:bg-gray-50"
        >
          Cancel
        </button>
        <button
          type="submit"
          className="px-4 py-2 text-sm bg-black text-white rounded hover:bg-gray-800"
        >
          Save
        </button>
      </div>
    </form>
  </div>
</Dialog>