> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Dialog

> A modal dialog component for overlays, forms, and confirmations

export const DialogImagePreviewExamplePreview = () => <iframe src="https://kerny-custom.vercel.app/preview/DialogImagePreviewExample" frameBorder="0" width="100%" height="440"></iframe>;

export const DialogDeleteConfirmationExamplePreview = () => <iframe src="https://kerny-custom.vercel.app/preview/DialogDeleteConfirmationExample" frameBorder="0" width="100%" height="360"></iframe>;

export const DialogFormExamplePreview = () => <iframe src="https://kerny-custom.vercel.app/preview/DialogFormExample" frameBorder="0" width="100%" height="420"></iframe>;

export const DialogConfirmationExamplePreview = () => <iframe src="https://kerny-custom.vercel.app/preview/DialogConfirmationExample" frameBorder="0" width="100%" height="340"></iframe>;

export const DialogBasicExamplePreview = () => <iframe src="https://kerny-custom.vercel.app/preview/DialogBasicExample" frameBorder="0" width="100%" height="340"></iframe>;

## Overview

The Dialog component provides a modal overlay for displaying content, forms, or confirmations with customizable triggers and content.

## Basic Usage

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { FormEvent, useState } from 'react';
    import { Button, Dialog } from '@peppermint-design/devreadykit-custom';

    export default function App() {
      const [open, setOpen] = useState(false);

      return (
        <>
          <Button onClick={() => setOpen(true)}>Open dialog</Button>

          <Dialog
            open={open}
            onClose={() => setOpen(false)}
            title="Enable notifications?"
            description="We'll send product updates and tips every couple of weeks."
            primary={{ label: 'Enable', onClick: () => setOpen(false) }}
            secondary={{ label: 'Not now', onClick: () => setOpen(false) }}
          >
            <p>
              You can change this setting in your account preferences at any time.
              We only send a handful of emails each month.
            </p>
          </Dialog>
        </>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <DialogBasicExamplePreview />
  </Tab>
</Tabs>

## Confirmation Dialog

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { useState } from 'react';
    import { Button, Dialog } from '@peppermint-design/devreadykit-custom';

    export default function ConfirmationExample() {
      const [open, setOpen] = useState(false);

      return (
        <>
          <Button color="error" onClick={() => setOpen(true)}>
            Delete file
          </Button>

          <Dialog
            open={open}
            onClose={() => setOpen(false)}
            title="Delete “Quarterly_Report.pdf”?"
            description="This action cannot be undone."
            primary={{ label: 'Delete', color: 'error', onClick: () => setOpen(false) }}
            secondary={{ label: 'Cancel', onClick: () => setOpen(false) }}
            size="md"
          >
            <p>If you still need this document, download a copy before deleting it.</p>
          </Dialog>
        </>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <DialogConfirmationExamplePreview />
  </Tab>
</Tabs>

## Form Dialog

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { useState } from 'react';
    import { Button, Dialog } from '@peppermint-design/devreadykit-custom';

    export default function FormDialog() {
      const [open, setOpen] = useState(false);
      const [formData, setFormData] = useState({ name: '', email: '' });

      const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        console.log('Created user', formData);
        setFormData({ name: '', email: '' });
        setOpen(false);
      };

      return (
        <>
          <Button onClick={() => setOpen(true)}>Create user</Button>

          <Dialog
            open={open}
            onClose={() => setOpen(false)}
            title="Create new user"
            description="Fill in the details below to add a teammate."
            footer={
              <div className="flex flex-col gap-200 sm:flex-row sm:justify-end">
                <Button variant="filled" color="secondary" onClick={() => setOpen(false)}>
                  Cancel
                </Button>
                <Button type="submit" form="dialog-user-form">
                  Create user
                </Button>
              </div>
            }
          >
            <form id="dialog-user-form" onSubmit={handleSubmit} className="space-y-4">
              <label className="flex flex-col gap-1 text-sm text-neutral-40">
                Name
                <input
                  className="rounded-lg border border-neutral-90 px-3 py-2 outline-none focus:border-primary-50"
                  value={formData.name}
                  onChange={(event) => setFormData((prev) => ({ ...prev, name: event.target.value }))}
                  required
                />
              </label>
              <label className="flex flex-col gap-1 text-sm text-neutral-40">
                Email
                <input
                  type="email"
                  className="rounded-lg border border-neutral-90 px-3 py-2 outline-none focus:border-primary-50"
                  value={formData.email}
                  onChange={(event) => setFormData((prev) => ({ ...prev, email: event.target.value }))}
                  required
                />
              </label>
            </form>
          </Dialog>
        </>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <DialogFormExamplePreview />
  </Tab>
</Tabs>

## Props

<PropsTable>
  | Prop                 | Type                                                                             | Default | Description                                                                           |
  | -------------------- | -------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------- |
  | open                 | `boolean`                                                                        | -       | Controls whether the dialog is visible                                                |
  | onClose              | `() => void`                                                                     | -       | Called when the dialog should close                                                   |
  | onOpenChange         | `(open: boolean) => void`                                                        | -       | Optional callback fired when the dialog closes via internal actions                   |
  | title                | `string`                                                                         | -       | Heading displayed at the top of the dialog                                            |
  | description          | `string`                                                                         | -       | Supporting copy displayed under the title                                             |
  | size                 | `'lg' \| 'md' \| 'sm'`                                                           | `'lg'`  | Predefined max-width and layout spacing                                               |
  | children             | `React.ReactNode`                                                                | -       | Body content rendered between header and footer                                       |
  | primary              | `{ label: string; onClick: () => void; color?: ButtonColor; size?: ButtonSize }` | -       | Primary action button configuration                                                   |
  | secondary            | `{ label: string; onClick: () => void; color?: ButtonColor; size?: ButtonSize }` | -       | Secondary action button configuration                                                 |
  | footer               | `React.ReactNode`                                                                | -       | Custom footer content, replaces the generated primary/secondary buttons when provided |
  | className            | `string`                                                                         | -       | Additional classes for the dialog surface                                             |
  | closeOnBackdropClick | `boolean`                                                                        | `true`  | Close the dialog when the backdrop is clicked                                         |
  | hideCloseButton      | `boolean`                                                                        | `false` | Hide the top-right close button                                                       |
</PropsTable>

## Examples

### Delete Confirmation

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { useState } from 'react';
    import { Button, Dialog } from '@peppermint-design/devreadykit-custom';

    export default function DeleteConfirmationExample() {
      const [open, setOpen] = useState(false);
      const file = { id: 'file-17', name: 'Brand_Guidelines.fig' };

      return (
        <>
          <Button color="error" onClick={() => setOpen(true)}>
            Delete “{file.name}”
          </Button>

          <Dialog
            open={open}
            onClose={() => setOpen(false)}
            title={`Delete ${file.name}?`}
            description="This action cannot be undone."
            primary={{ label: 'Delete', color: 'error', onClick: () => setOpen(false) }}
            secondary={{ label: 'Cancel', onClick: () => setOpen(false) }}
            size="sm"
          >
            <p className="text-neutral-40">
              Make sure no one on your team still needs this file. Once deleted, you'll
              need to re-upload it manually.
            </p>
          </Dialog>
        </>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <DialogDeleteConfirmationExamplePreview />
  </Tab>
</Tabs>

### Image Preview Dialog

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { useState } from 'react';
    import { Button, Dialog } from '@peppermint-design/devreadykit-custom';

    const image = {
      url: 'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee',
      alt: 'Sunset over mountains',
    };

    export default function ImagePreview() {
      const [open, setOpen] = useState(false);

      return (
        <>
          <Button variant="border" onClick={() => setOpen(true)}>
            Preview image
          </Button>

          <Dialog
            open={open}
            onClose={() => setOpen(false)}
            title="Image preview"
            description="Click outside or press Escape to close."
            size="lg"
            hideCloseButton
            footer={
              <div className="flex justify-end">
                <Button onClick={() => setOpen(false)}>Close</Button>
              </div>
            }
          >
            <img
              src={`${image.url}?auto=format&fit=crop&w=960&q=80`}
              alt={image.alt}
              className="max-h-[480px] w-full rounded-lg object-cover"
            />
          </Dialog>
        </>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <DialogImagePreviewExamplePreview />
  </Tab>
</Tabs>