Nayan UI - Dialog

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

Basic Dialog

Simple dialog with default size and basic content.

Dialog Sizes

Different dialog sizes for various content types.

Settings Dialog

Complex dialog with multiple sections and form controls.

Profile Dialog

User profile information dialog with avatar and details.

Payment Dialog

Payment confirmation dialog with success state.

Form Dialog

Dialog containing a form with validation and submission.

Custom Styled Dialog

Dialog with custom styling and colors.

Multiple Dialogs Demo

Quick access to all dialog examples.

# Usage

# 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.

# Tags