Dialog Component

Overview

The Dialog component provides a modal dialog interface for displaying content, forms, and interactive elements. It's commonly used for confirmations, forms, and any content that needs to be displayed in an overlay.

Basic Usage

import { Dialog } from '@dashflowx/core'

export default function DialogExample() {
  return (
    <Dialog 
      title="Edit Profile"
      description="Make changes to your profile here. Click save when you're done."
      triggerText="Edit Profile"
      content={<div>Profile form content</div>}
      footerActions={<button>Save changes</button>}
    />
  )
}

Preview:

Loading Button...

Props

Prop	Type	Default	Description
`title`	`string`	`'Dialog Title'`	The title of the dialog
`description`	`string`	`'Dialog description goes here.'`	The description text for the dialog
`triggerText`	`string`	`'Open Dialog'`	The text for the trigger button
`content`	`JSX.Element`	-	The main content of the dialog
`footerActions`	`JSX.Element`	-	The footer actions for the dialog
`className`	`string`	`''`	Additional CSS classes for the container

Examples

Basic Dialog

<Dialog 
  title="Edit Profile"
  description="Make changes to your profile here. Click save when you're done."
  triggerText="Edit Profile"
  content={<div>Profile form content</div>}
  footerActions={<button>Save changes</button>}
/>

Preview:

Loading Button...

Confirmation Dialog

<Dialog 
  title="Delete Item"
  description="Are you sure you want to delete this item? This action cannot be undone."
  triggerText="Delete Item"
  content={<div>This will permanently delete the item.</div>}
  footerActions={
    <div className="flex space-x-2">
      <button className="px-4 py-2 bg-gray-200 rounded">Cancel</button>
      <button className="px-4 py-2 bg-red-600 text-white rounded">Delete</button>
    </div>
  }
/>

Preview:

Loading Button...

Form Dialog

<Dialog 
  title="Create New Project"
  description="Fill out the form below to create a new project."
  triggerText="New Project"
  content={
    <div className="space-y-4">
      <div>
        <label className="block text-sm font-medium mb-2">Project Name</label>
        <input type="text" className="w-full border rounded px-3 py-2" />
      </div>
      <div>
        <label className="block text-sm font-medium mb-2">Description</label>
        <textarea className="w-full border rounded px-3 py-2" rows={3} />
      </div>
    </div>
  }
  footerActions={
    <div className="flex space-x-2">
      <button className="px-4 py-2 bg-gray-200 rounded">Cancel</button>
      <button className="px-4 py-2 bg-blue-600 text-white rounded">Create</button>
    </div>
  }
/>

Preview:

Loading Button...

Custom Styled Dialog

<Dialog 
  title="Custom Styled"
  description="This dialog has custom styling."
  triggerText="Custom Dialog"
  content={<div>Custom styled content</div>}
  footerActions={<button>Save</button>}
  className="border-2 border-blue-500 rounded-xl"
/>

Preview:

Loading Button...

Large Dialog

<Dialog 
  title="Large Dialog"
  description="This is a larger dialog with more content."
  triggerText="Open Large Dialog"
  content={
    <div className="space-y-4">
      <p>This is a larger dialog with more content space.</p>
      <p>It can contain multiple paragraphs and form elements.</p>
      <div className="grid grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium mb-2">Field 1</label>
          <input type="text" className="w-full border rounded px-3 py-2" />
        </div>
        <div>
          <label className="block text-sm font-medium mb-2">Field 2</label>
          <input type="text" className="w-full border rounded px-3 py-2" />
        </div>
      </div>
    </div>
  }
  footerActions={
    <div className="flex space-x-2">
      <button className="px-4 py-2 bg-gray-200 rounded">Cancel</button>
      <button className="px-4 py-2 bg-blue-600 text-white rounded">Save</button>
    </div>
  }
/>

Preview:

Loading Button...

Common Use Cases

User Profile Edit

const [profile, setProfile] = useState({
  name: 'John Doe',
  email: 'john@example.com',
  bio: 'Software developer'
});

<Dialog 
  title="Edit Profile"
  description="Update your profile information below."
  triggerText="Edit Profile"
  content={
    <div className="space-y-4">
      <div>
        <label className="block text-sm font-medium mb-2">Name</label>
        <input 
          type="text" 
          value={profile.name}
          onChange={(e) => setProfile(prev => ({ ...prev, name: e.target.value }))}
          className="w-full border rounded px-3 py-2" 
        />
      </div>
      <div>
        <label className="block text-sm font-medium mb-2">Email</label>
        <input 
          type="email" 
          value={profile.email}
          onChange={(e) => setProfile(prev => ({ ...prev, email: e.target.value }))}
          className="w-full border rounded px-3 py-2" 
        />
      </div>
      <div>
        <label className="block text-sm font-medium mb-2">Bio</label>
        <textarea 
          value={profile.bio}
          onChange={(e) => setProfile(prev => ({ ...prev, bio: e.target.value }))}
          className="w-full border rounded px-3 py-2" 
          rows={3}
        />
      </div>
    </div>
  }
  footerActions={
    <div className="flex space-x-2">
      <button className="px-4 py-2 bg-gray-200 rounded">Cancel</button>
      <button className="px-4 py-2 bg-blue-600 text-white rounded">Save Changes</button>
    </div>
  }
/>

Delete Confirmation

const [itemToDelete, setItemToDelete] = useState(null);

<Dialog 
  title="Delete Item"
  description="Are you sure you want to delete this item? This action cannot be undone."
  triggerText="Delete Item"
  content={
    <div className="text-center">
      <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 mb-4">
        <span className="text-red-600 text-xl">⚠️</span>
      </div>
      <p className="text-sm text-gray-500">
        This will permanently delete the item and all associated data.
      </p>
    </div>
  }
  footerActions={
    <div className="flex space-x-2">
      <button 
        className="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300"
        onClick={() => setItemToDelete(null)}
      >
        Cancel
      </button>
      <button 
        className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
        onClick={() => {
          // Delete logic here
          setItemToDelete(null);
        }}
      >
        Delete
      </button>
    </div>
  }
/>

Settings Dialog

const [settings, setSettings] = useState({
  notifications: true,
  darkMode: false,
  language: 'en'
});

<Dialog 
  title="Settings"
  description="Configure your application settings."
  triggerText="Settings"
  content={
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <label className="text-sm font-medium">Notifications</label>
        <input 
          type="checkbox" 
          checked={settings.notifications}
          onChange={(e) => setSettings(prev => ({ ...prev, notifications: e.target.checked }))}
          className="rounded"
        />
      </div>
      <div className="flex items-center justify-between">
        <label className="text-sm font-medium">Dark Mode</label>
        <input 
          type="checkbox" 
          checked={settings.darkMode}
          onChange={(e) => setSettings(prev => ({ ...prev, darkMode: e.target.checked }))}
          className="rounded"
        />
      </div>
      <div>
        <label className="block text-sm font-medium mb-2">Language</label>
        <select 
          value={settings.language}
          onChange={(e) => setSettings(prev => ({ ...prev, language: e.target.value }))}
          className="w-full border rounded px-3 py-2"
        >
          <option value="en">English</option>
          <option value="es">Spanish</option>
          <option value="fr">French</option>
        </select>
      </div>
    </div>
  }
  footerActions={
    <div className="flex space-x-2">
      <button className="px-4 py-2 bg-gray-200 rounded">Cancel</button>
      <button className="px-4 py-2 bg-blue-600 text-white rounded">Save Settings</button>
    </div>
  }
/>

Information Dialog

<Dialog 
  title="About This App"
  description="Learn more about this application."
  triggerText="About"
  content={
    <div className="space-y-4">
      <div className="text-center">
        <div className="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-blue-100 mb-4">
          <span className="text-blue-600 text-2xl">ℹ️</span>
        </div>
        <h3 className="text-lg font-semibold">App Version 1.0.0</h3>
        <p className="text-sm text-gray-500">
          Built with React and TypeScript
        </p>
      </div>
      <div className="space-y-2">
        <p className="text-sm">
          This application provides a comprehensive set of UI components
          for building modern web applications.
        </p>
        <p className="text-sm">
          Features include responsive design, accessibility support,
          and customizable themes.
        </p>
      </div>
    </div>
  }
  footerActions={
    <button className="px-4 py-2 bg-blue-600 text-white rounded">Got it</button>
  }
/>

Best Practices

Clear Titles and Descriptions

Use clear and descriptive titles and descriptions.

// ✅ Good - Clear title and description
<Dialog 
  title="Delete User Account"
  description="This will permanently delete the user account and all associated data. This action cannot be undone."
  triggerText="Delete Account"
  content={<div>Confirmation content</div>}
  footerActions={<button>Delete</button>}
/>

// ❌ Avoid - Unclear title and description
<Dialog 
  title="Delete"
  description="Are you sure?"
  triggerText="Delete"
  content={<div>Content</div>}
  footerActions={<button>OK</button>}
/>

Appropriate Button Labels

Use clear and action-oriented button labels.

// ✅ Good - Clear button labels
<Dialog 
  title="Save Changes"
  description="Save your changes?"
  triggerText="Save"
  content={<div>Form content</div>}
  footerActions={
    <div className="flex space-x-2">
      <button>Cancel</button>
      <button>Save Changes</button>
    </div>
  }
/>

// ❌ Avoid - Unclear button labels
<Dialog 
  title="Save"
  description="Save?"
  triggerText="Save"
  content={<div>Content</div>}
  footerActions={
    <div className="flex space-x-2">
      <button>No</button>
      <button>Yes</button>
    </div>
  }
/>

Consistent Styling

Use consistent styling across all dialogs.

// ✅ Good - Consistent styling
const dialogButtonClasses = "px-4 py-2 rounded font-medium";
const primaryButtonClasses = `${dialogButtonClasses} bg-blue-600 text-white hover:bg-blue-700`;
const secondaryButtonClasses = `${dialogButtonClasses} bg-gray-200 text-gray-800 hover:bg-gray-300`;

<Dialog 
  title="Dialog Title"
  description="Dialog description"
  triggerText="Open Dialog"
  content={<div>Content</div>}
  footerActions={
    <div className="flex space-x-2">
      <button className={secondaryButtonClasses}>Cancel</button>
      <button className={primaryButtonClasses}>Save</button>
    </div>
  }
/>

Accessible Implementation

Ensure dialogs are accessible to all users.

// ✅ Good - Accessible
<Dialog 
  title="Accessible Dialog"
  description="This dialog is accessible to all users"
  triggerText="Open Dialog"
  content={<div>Accessible content</div>}
  footerActions={<button>Close</button>}
/>

Proper Content Structure

Structure dialog content logically.

// ✅ Good - Proper structure
<Dialog 
  title="User Registration"
  description="Create a new user account"
  triggerText="Add User"
  content={
    <div className="space-y-4">
      <div>
        <label className="block text-sm font-medium mb-2">Name</label>
        <input type="text" className="w-full border rounded px-3 py-2" />
      </div>
      <div>
        <label className="block text-sm font-medium mb-2">Email</label>
        <input type="email" className="w-full border rounded px-3 py-2" />
      </div>
    </div>
  }
  footerActions={
    <div className="flex space-x-2">
      <button>Cancel</button>
      <button>Create User</button>
    </div>
  }
/>

Customization

Custom Styling

You can customize the dialog appearance using CSS classes:

<Dialog 
  title="Custom Styled"
  description="This dialog has custom styling"
  triggerText="Custom Dialog"
  content={<div>Custom content</div>}
  footerActions={<button>Save</button>}
  className="border-2 border-purple-500 rounded-xl"
/>

Different Themes

Use different themes for different contexts:

// Light theme
<Dialog 
  title="Light Theme"
  description="Light themed dialog"
  triggerText="Open Dialog"
  content={<div>Content</div>}
  footerActions={<button>Save</button>}
  className="bg-white border-gray-200"
/>

// Dark theme
<Dialog 
  title="Dark Theme"
  description="Dark themed dialog"
  triggerText="Open Dialog"
  content={<div>Content</div>}
  footerActions={<button>Save</button>}
  className="bg-gray-900 border-gray-700 text-white"
/>

Size Variations

Use different sizes for different content types:

// Small dialog
<Dialog 
  title="Small Dialog"
  description="Small dialog for simple content"
  triggerText="Open Small"
  content={<div>Simple content</div>}
  footerActions={<button>OK</button>}
  className="max-w-sm"
/>

// Large dialog
<Dialog 
  title="Large Dialog"
  description="Large dialog for complex content"
  triggerText="Open Large"
  content={<div>Complex content with many fields</div>}
  footerActions={<button>Save</button>}
  className="max-w-4xl"
/>

Advanced Usage

Dynamic Content

Load dialog content dynamically:

const [dialogContent, setDialogContent] = useState(null);

const openDialog = (type: string) => {
  switch (type) {
    case 'edit':
      setDialogContent(editForm);
      break;
    case 'delete':
      setDialogContent(deleteConfirmation);
      break;
    default:
      setDialogContent(defaultContent);
  }
};

Form Validation

Implement form validation in dialogs:

const [formData, setFormData] = useState({ name: '', email: '' });
const [errors, setErrors] = useState({});

const validateForm = () => {
  const newErrors = {};
  
  if (!formData.name) {
    newErrors.name = 'Name is required';
  }
  
  if (!formData.email) {
    newErrors.email = 'Email is required';
  } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
    newErrors.email = 'Email is invalid';
  }
  
  setErrors(newErrors);
  return Object.keys(newErrors).length === 0;
};

Dialog State Management

Manage dialog state effectively:

const [isOpen, setIsOpen] = useState(false);
const [dialogType, setDialogType] = useState('');

const openDialog = (type: string) => {
  setDialogType(type);
  setIsOpen(true);
};

const closeDialog = () => {
  setIsOpen(false);
  setDialogType('');
};

Modal: For modal overlays
Popover: For popup content
Button: For trigger buttons
Form: For form content
Alert: For alert dialogs

API Reference

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

Overview

Basic Usage

Props

Examples

Basic Dialog

Confirmation Dialog

Form Dialog

Custom Styled Dialog

Large Dialog

Common Use Cases

User Profile Edit

Delete Confirmation

Settings Dialog

Information Dialog

Best Practices

Clear Titles and Descriptions

Appropriate Button Labels

Consistent Styling

Accessible Implementation

Proper Content Structure

Customization

Custom Styling

Different Themes

Size Variations

Advanced Usage

Dynamic Content

Form Validation

Dialog State Management

Related Components

API Reference