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
title	string	Required	Title for the dialog.
description	string	Optional	Description text below the title.
children	React.ReactNode	Optional	Content for the dialog body.
trigger	React.ReactNode	Optional	Trigger element for the dialog.
isOpen	boolean	Optional	Controlled open state.
isDefaultOpen	boolean	Optional	Default open state for uncontrolled usage.
onOpenChange	(isOpen: boolean) => void	Optional	Callback when open state changes.
isSwipeable	boolean	Optional	Whether the dialog can be swiped to dismiss.
className	string	' '	You can customise by passing tailwind classes.
titleClassName	string	' '	You can customise title by passing tailwind classes.
contentClassName	string	' '	You can customise content by passing tailwind classes.

Dialog

Demo

Demo Coming Soon

Usage

Attributes

Tags