A Dialog component is a UI element that displays a pop-up window over the main content to capture user attention or request input. It is often used for tasks like confirmations, alerts, forms, or other interactions that require user feedback before proceeding. Dialogs can include buttons like "OK" or "Cancel" to confirm or dismiss actions, and typically block interaction with the underlying content until closed.

# Demo

# Attributes

Name	Type	Default	Details
className	string	' '	You can customise by passing tailwind classes.
titleClassName	string	' '	You can customise by passing tailwind classes.
headerClassName	string	' '	You can customise by passing tailwind classes.
contentClassName	string	' '	You can customise by passing tailwind classes.
title	string	Required	You can pass title for dialog.
size	DialogSize	DialogSize.MD	You can pass size of the dialog.
isOpen	boolean	false	You can pass isOpen to show / hide alert box.
children	string \| ReactNode	Required	You can pass dialog content as children.
onClose	() => void	Required	You can get callback when dialog got closed.

# Usage

import { useState } from 'react';
import { NButton, NDialog, DialogSize } from 'nayan';

const Dialog = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <NDialog isOpen={isOpen} onClose="" {() => setIsOpen(false)} size={DialogSize.MD} title="Payment confirmation">
        Your payment has been successfully submitted. We’ve sent you an email with all of the details of your order.
      </NDialog>
      <NButton onClick={() => setIsOpen(true)}>Show Dialog</NButton>
    </div>
  );
};

export default Dialog;