Nayan UI - 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

Basic Confirm Alert

Simple confirmation dialog with default styling.

Delete Confirmation

Destructive action confirmation with custom styling.

Logout Confirmation

Session termination confirmation.

Save Changes Confirmation

Confirmation for saving important changes.

Download Confirmation

Confirmation before starting a download.

Reset Settings Confirmation

Confirmation for resetting application settings.

Danger Alert

High-risk action confirmation with warning styling.

Custom Styled Alert

Confirmation dialog with custom styling and colors.

Multiple Actions Demo

Demonstrate multiple confirmation dialogs in sequence.

Action Results

Live display of confirmation dialog results.

Last Action Result:

No actions performed yet

Usage Guidelines

Best practices for using confirmation dialogs.

When to use confirmation dialogs:

Destructive actions (delete, reset, clear)
Actions that cannot be undone
Actions with significant consequences
Before leaving unsaved work
Before starting time-consuming operations

Best practices:

Use clear, specific titles and messages
Make button labels action-oriented
Use appropriate colors for different action types
Keep messages concise but informative
Always provide a way to cancel

# Usage

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

# Tags