Confirm Alert

Name: Nayan UI
Author: Nayan UI

A Confirm Alert component is a UI element that prompts users to confirm or cancel an action before proceeding. It typically displays a message asking for confirmation, along with "Confirm" and "Cancel" buttons, ensuring that the user consciously approves or rejects the action, often used for critical tasks like deletions or irreversible changes.

Demo

Usage

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

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

  return (
    <div>
      <NConfirmAlert
        isOpen={isOpen}
        title="Are you absolutely sure?"
        message="This action cannot be undone. This will permanently delete your account and remove your data from our servers."
        onResult={result => console.log('Alert Clicked', result)}
        onClose={() => setIsOpen(false)}
      />
      <NButton onClick={() => setIsOpen(true)}>Show Alert</NButton>
    </div>
  );
};

export default ConfirmAlert;

Attributes

Name	Type	Default	Details
isOpen	boolean	Required	Controls whether the confirm alert is open.
message	string	Required	The confirmation message to display.
title	string	Optional	Title for the confirmation dialog.
className	string	' '	You can customise by passing tailwind classes.
titleClassName	string	' '	You can customise by passing tailwind classes.
messageClassName	string	' '	You can customise by passing tailwind classes.
cancelClassName	string	' '	You can customise by passing tailwind classes.
confirmClassName	string	' '	You can customise by passing tailwind classes.
confirmText	string	Optional	Custom text for confirm button.
cancelText	string	Optional	Custom text for cancel button.
onResult	(result: boolean) => void	Required	Callback when user confirms or cancels.
onClose	() => void	Required	Callback when dialog is closed.
children	React.ReactNode	Optional	Custom content for the dialog.
renderActions	(onResult: (result: boolean) => void) => React.ReactNode	Optional	Custom render function for actions.
renderHeader	(title: string, message: string) => React.ReactNode	Optional	Custom render function for header.

Confirm Alert

Demo

Usage

Attributes

Tags