Dialog

Name: Nayan UI
Author: Nayan UI

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

Usage

import { useState } from 'react';
import { NButton, NDialog, DialogSize } from '@nayan-ui/react';

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;

Attributes

Name	Type	Default	Details
isOpen	boolean	Required	Controls whether the dialog is open.
title	string	Required	Title for the dialog.
size	DialogSize	Optional	Size of the dialog.
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.
children	React.ReactNode	Required	Content for the dialog.
onClose	() => void	Required	Callback when dialog is closed.
renderHeader	(title: string) => React.ReactNode	Optional	Custom render function for header.
renderFooter	() => React.ReactNode	Optional	Custom render function for footer.

Dialog

Demo

Usage

Attributes

Tags