Skip to Content
Dashflow Logo

AlertDialog Component

A comprehensive guide to using the AlertDialog component with examples, props, and best practices.

Overview

The AlertDialog component is a modal dialog that interrupts user workflow to communicate important information and request a response. It's commonly used for confirmations, warnings, and critical actions that require user attention.

Basic Usage

import { AlertDialog } from '@dashflowx/core'


export default function AlertDialogExample() {
  const handleSubmit = () => {
    console.log('Action confirmed');
  };


  return (
    <AlertDialog 
      variant="basic"
      actionButton="Delete Item"
      title="Delete Item"
      description="Are you sure you want to delete this item? This action cannot be undone."
      onSubmit={handleSubmit}
      buttonClassName="bg-primary-light hover:bg-primary text-white px-4 py-2 rounded"
      submitClassName="bg-primary-light hover:bg-primary text-white px-4 py-2 rounded"
    />
  )
}

Preview:

Loading Button...

Variants

Basic AlertDialog

The default alert dialog style with clean design and proper spacing.

<AlertDialog 
  variant="basic"
  actionButton="Confirm Action"
  title="Confirm Action"
  description="Please confirm that you want to proceed with this action."
  onSubmit={() => console.log('Confirmed')}
  buttonClassName="bg-primary-light hover:bg-primary text-white px-4 py-2 rounded"
  submitClassName="bg-primary-light hover:bg-primary text-white px-4 py-2 rounded"
/>

Preview:

Loading Button...

Success AlertDialog

For successful operations and positive confirmations.

<AlertDialog 
  variant="success"
  actionButton="Complete Setup"
  title="Setup Complete"
  description="Your account has been successfully configured. Would you like to proceed to the dashboard?"
  onSubmit={() => console.log('Setup completed')}
  buttonClassName="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded border border-green-300"
  submitClassName="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded border border-green-300"
/>

Preview:

Loading Button...

Warning AlertDialog

For warnings and cautionary confirmations.

<AlertDialog 
  variant="warning"
  actionButton="Proceed with Caution"
  title="Warning"
  description="This action may have unintended consequences. Please review carefully before proceeding."
  onSubmit={() => console.log('Proceeded with caution')}
  buttonClassName="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded border border-yellow-300"
  submitClassName="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded border border-yellow-300"
/>

Preview:

Loading Button...

Error AlertDialog

For critical actions and error confirmations.

<AlertDialog 
  variant="error"
  actionButton="Delete Permanently"
  title="Critical Action"
  description="This action cannot be undone. All data will be permanently lost."
  onSubmit={() => console.log('Critical action confirmed')}
  buttonClassName="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded border border-red-300"
  submitClassName="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded border border-red-300"
/>

Preview:

Loading Button...

Info AlertDialog

For informational confirmations and guidance.

<AlertDialog 
  variant="info"
  actionButton="Learn More"
  title="Information"
  description="This will open additional documentation and resources. Continue?"
  onSubmit={() => console.log('Info action confirmed')}
  buttonClassName="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded border border-blue-300"
  submitClassName="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded border border-blue-300"
/>

Preview:

Loading Button...

Props

PropTypeDefaultDescription
variant'basic'-The visual style variant of the alert dialog
actionButtonstring | JSX.Element-The text or element for the trigger button
titlestring-The title/heading of the dialog
descriptionstring-The main content/description of the dialog
onSubmit() => void-Function called when the user confirms the action
buttonClassNamestring-Additional CSS classes for the trigger button
submitClassNamestring-Additional CSS classes for the submit button

Examples

AlertDialog with Custom Styling

You can customize the appearance of both the trigger button and submit button using the buttonClassName and submitClassName props.

<AlertDialog 
  variant="basic"
  actionButton="Remove User"
  title="Remove User"
  description="This will permanently remove the user from the system."
  onSubmit={handleRemoveUser}
  buttonClassName="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg shadow-md border border-red-300"
  submitClassName="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg shadow-md border border-red-300"
/>

Preview:

Loading Button...

AlertDialog with Different Button Styles

You can style the trigger and submit buttons differently to create visual hierarchy.

<AlertDialog 
  variant="basic"
  actionButton="Update Settings"
  title="Update Settings"
  description="This will apply new configuration settings to your account."
  onSubmit={handleUpdateSettings}
  buttonClassName="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded border border-gray-300"
  submitClassName="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded border border-green-300"
/>

Preview:

Loading Button...

AlertDialog with Warning Styling

For warning or cautionary dialogs, use orange/yellow styling with matching borders.

<AlertDialog 
  variant="basic"
  actionButton="Proceed with Caution"
  title="Warning"
  description="This action may have unintended consequences. Please review carefully."
  onSubmit={handleProceedWithCaution}
  buttonClassName="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded border border-yellow-300"
  submitClassName="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded border border-yellow-300"
/>

Preview:

Loading Button...

AlertDialog with Info Styling

For informational dialogs, use blue styling with matching borders.

<AlertDialog 
  variant="basic"
  actionButton="Learn More"
  title="Information"
  description="This will open additional documentation and resources."
  onSubmit={handleLearnMore}
  buttonClassName="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded border border-blue-300"
  submitClassName="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded border border-blue-300"
/>

Preview:

Loading Button...
<AlertDialog 
  variant="basic"
  actionButton="Remove User"
  title="Remove User"
  description="This will permanently remove the user from the system."
  onSubmit={handleRemoveUser}
  buttonClassName="bg-red-600 hover:bg-red-700 text-white"
  submitClassName="bg-red-600 hover:bg-red-700 text-white"
/>

Preview:

Loading Button...

AlertDialog with JSX Action Button

import { TrashIcon } from '@heroicons/react/24/outline'


<AlertDialog 
  variant="basic"
  actionButton={
    <>
      <TrashIcon className="w-4 h-4 mr-2" />
      Delete
    </>
  }
  title="Delete Confirmation"
  description="This action cannot be undone. Are you sure you want to delete this item?"
  onSubmit={handleDelete}
/>

Preview:

Loading Button...

AlertDialog for Form Submission

<AlertDialog 
  variant="basic"
  actionButton="Submit Form"
  title="Submit Form"
  description="Are you ready to submit this form? Please review your information before proceeding."
  onSubmit={handleFormSubmit}
  buttonClassName="bg-blue-600 hover:bg-blue-700 text-white"
  submitClassName="bg-green-600 hover:bg-green-700 text-white"
/>

Preview:

Loading Button...

Accessibility

The AlertDialog component includes proper accessibility features:

  • ARIA attributes: Proper role="dialog" and ARIA labels
  • Focus management: Automatically focuses on the dialog when opened
  • Keyboard navigation: Supports Escape key to close and Tab navigation
  • Screen readers: Properly announces dialog content and state
  • Focus trap: Keeps focus within the dialog when open

Best Practices

Clear and Actionable Language Use clear, specific language that clearly indicates the action and consequences.

// ❌ Bad
<AlertDialog 
  actionButton="Continue"
  title="Warning"
  description="Are you sure?"
/>


// ✅ Good
<AlertDialog 
  actionButton="Delete Account"
  title="Delete Account"
  description="This will permanently delete your account and all associated data. This action cannot be undone."
  onSubmit={handleDeleteAccount}
/>

Appropriate Button Styling Use button colors that match the severity of the action.

// ✅ Good - Destructive action with red styling
<AlertDialog 
  actionButton="Delete"
  title="Delete Item"
  description="This action cannot be undone."
  buttonClassName="bg-red-600 hover:bg-red-700 text-white"
  submitClassName="bg-red-600 hover:bg-red-700 text-white"
/>

Meaningful Descriptions Provide enough context for users to make an informed decision.

// ✅ Good - Detailed description
<AlertDialog 
  actionButton="Remove Access"
  title="Remove User Access"
  description="This will revoke the user's access to all shared resources and remove them from the team. They will be notified via email."
  onSubmit={handleRemoveAccess}
/>

Consistent Button Text Use consistent terminology for similar actions across your application.

// ✅ Good - Consistent terminology
<AlertDialog actionButton="Delete" title="Delete Item" />
<AlertDialog actionButton="Delete" title="Delete User" />
<AlertDialog actionButton="Delete" title="Delete Project" />

Common Use Cases

Confirmation Dialogs

<AlertDialog 
  variant="basic"
  actionButton="Save Changes"
  title="Save Changes"
  description="You have unsaved changes. Do you want to save them before leaving?"
  onSubmit={handleSave}
/>

Destructive Actions

<AlertDialog 
  variant="basic"
  actionButton="Delete Forever"
  title="Delete Forever"
  description="This will permanently delete this item and cannot be undone."
  onSubmit={handlePermanentDelete}
  buttonClassName="bg-red-600 hover:bg-red-700 text-white"
  submitClassName="bg-red-600 hover:bg-red-700 text-white"
/>

System Notifications

<AlertDialog 
  variant="basic"
  actionButton="Update System"
  title="System Update Available"
  description="A new system update is available. This will restart the application and may take a few minutes."
  onSubmit={handleSystemUpdate}
/>

Customization

Custom Styling

You can customize the alert dialog appearance using CSS classes:

<AlertDialog 
  variant="basic"
  actionButton="Custom Action"
  title="Custom Dialog"
  description="This dialog has custom styling applied."
  buttonClassName="bg-purple-600 hover:bg-purple-700 text-white rounded-full"
  submitClassName="bg-green-600 hover:bg-green-700 text-white rounded-full"
/>

Custom Icons

Use icons to enhance the visual meaning:

import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'


<AlertDialog 
  variant="basic"
  actionButton={
    <>
      <ExclamationTriangleIcon className="w-4 h-4 mr-2" />
      Warning Action
    </>
  }
  title="Warning"
  description="This action requires special attention."
  onSubmit={handleWarningAction}
/>
  • Modal: For general modal dialogs
  • Dialog: For complex dialog interactions
  • Popover: For lightweight contextual information
  • Toast: For non-blocking notifications

API Reference

For the complete API reference and advanced usage patterns, see the AlertDialog API documentation.

Edit this page on GitHub
previousToggle Group