Confirm Alert

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

Rendered live, with the same build of the library you install.

Usage

Source
ConfirmAlert.tsx
import { useState } from 'react';
import { NButton, NConfirmAlert } 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."
        onResult={result => console.log('Result:', result)}
        onClose={() => setIsOpen(false)}
      />
      <NButton onClick={() => setIsOpen(true)}>Show Confirm Alert</NButton>
    </div>
  );
};


export default ConfirmAlert;

Attributes

15 props
NameTypeDefaultDetails
isOpenbooleanRequiredControls whether the confirm alert is open.
messagestringRequiredThe confirmation message to display.
titlestringOptionalTitle for the confirmation dialog.
classNamestring' 'You can customise by passing tailwind classes.
titleClassNamestring' 'You can customise by passing tailwind classes.
messageClassNamestring' 'You can customise by passing tailwind classes.
cancelClassNamestring' 'You can customise by passing tailwind classes.
confirmClassNamestring' 'You can customise by passing tailwind classes.
confirmTextstringOptionalCustom text for confirm button.
cancelTextstringOptionalCustom text for cancel button.
onResult(result: boolean) => voidRequiredCallback when user confirms or cancels.
onClose() => voidRequiredCallback when dialog is closed.
childrenReact.ReactNodeOptionalCustom content for the dialog.
renderActions(onResult: (result: boolean) => void) => React.ReactNodeOptionalCustom render function for actions.
renderHeader(title: string, message: string) => React.ReactNodeOptionalCustom render function for header.

Tags

Other components solving nearby problems.