💬 Dialog Demo

Basic Dialog

Click the button below to see a simple dialog with default settings.

Delete Confirmation

A common use case: confirming a destructive action with styled buttons.

Save Changes Confirmation

Ask users if they want to save changes before leaving, with three options.

HTML Content

Dialogs support rich HTML content including lists, formatting, and more.

Long Scrollable Content

When content is long, the body becomes scrollable while buttons remain sticky at the bottom.

Modal vs Non-Modal

Modal dialogs dim the background and prevent interaction outside. Non-modal dialogs allow clicking outside.

Keyboard & Click Behavior

Control whether Esc key and clicking outside can close the dialog.

Button Layouts

Different button configurations: no buttons, one button, two buttons, or multiple buttons.

Stacked Dialogs

Multiple dialogs can be opened at the same time and will stack on top of each other.

Custom Styled Buttons

Buttons can have custom background colors to match your design system.

Appearance Animations

Control how the dialog appears on screen with different animation effects.

Form in Dialog

You can include forms and interactive elements in the dialog body.

Usage Example

// Import the dialogAdd function
import { dialogAdd } from '@liwe3/webcomponents';

// Show a dialog
const dialog = dialogAdd({
  title: 'Delete File',
  body: '<p>Are you sure you want to delete this file?</p><p>This action cannot be undone.</p>',
  buttons: [
    {
      label: 'Delete',
      backgroundColor: '#dc3545',
      onclick: () => {
        console.log('File deleted');
        dialog.close(); // Close the dialog after action
      }
    },
    {
      label: 'Cancel',
      onclick: () => {
        console.log('Cancelled');
        dialog.close();
      }
    }
  ],
  // Note: When custom buttons are provided, the default "Close" button is not shown
  modal: true, // Dim background (default: true)
  escToClose: true, // Allow Esc key to close (default: true)
  clickToClose: true, // Allow clicking outside to close (default: true)
  fxAppear: 'fade', // Animation: 'none', 'fade', or 'slide' (default: 'none')
  onClose: () => console.log('Dialog closed')
});