Logo

Documentation v4.0.0

  • Home
  • Components
  • Dialog
Light
Dark
System

Overview

Dialog is a static class that provides pre-configured modal dialogs based on SweetAlert2. It offers confirm, success, error, warning, info, unknown error, and loading dialogs with Metronic-styled buttons.

Import

import {components} from 'metronic-extension';
const {Dialog} = components;

Methods

All methods are static. No instantiation is required.
Method Return Description
confirm(message, options?) Promise<boolean> Shows a confirm dialog with OK / Cancel buttons. Returns true if confirmed.
success(message, options?) Promise<boolean> Shows a success dialog with a notification sound. Returns true if confirmed.
error(message, options?) Promise<void> Shows an error dialog.
warning(message, options?) Promise<void> Shows a warning dialog.
info(message, options?) Promise<void> Shows an info dialog.
unknownError(message?, options?) Promise<void> Shows an error dialog with a default message: "The process was interrupted due to an error. Please try again."
loading(message, options?) Promise<void> Shows a loading dialog with a spinner. No close button.
close() void Closes the currently open dialog.

Parameters

Name Type Description
message string The modal's text content (HTML is supported).
options SweetAlertOptions Optional. Additional SweetAlert2 options to merge with the defaults.

Demo

Click each button to see the dialog in action.
<button data-on-confirm type="button" class="btn btn-primary">Confirm</button>
<button data-on-success type="button" class="btn btn-success">Success</button>
<button data-on-error type="button" class="btn btn-danger">Error</button>
<button data-on-unknown-error type="button" class="btn btn-danger">Unknown Error</button>
<button data-on-warning type="button" class="btn btn-warning">Warning</button>
<button data-on-info type="button" class="btn btn-info">Info</button>
<button data-on-loading type="button" class="btn btn-secondary">Loading</button>

import {components} from 'metronic-extension';
const {Dialog} = components;

// Confirm
document.querySelector('[data-on-confirm]').addEventListener('click', async () => {
  const confirmed = await Dialog.confirm('Are you sure?');
  alert(`Confirmed: ${confirmed}`);
});

// Success
document.querySelector('[data-on-success]').addEventListener('click', () => {
  Dialog.success('Operation completed successfully.');
});

// Error
document.querySelector('[data-on-error]').addEventListener('click', () => {
  Dialog.error('An error has occurred.');
});

// Unknown Error
document.querySelector('[data-on-unknown-error]').addEventListener('click', () => {
  Dialog.unknownError();
});

// Warning
document.querySelector('[data-on-warning]').addEventListener('click', () => {
  Dialog.warning('Please proceed with caution.');
});

// Info
document.querySelector('[data-on-info]').addEventListener('click', () => {
  Dialog.info('Here is some information.');
});

// Loading (auto-closes after 2 seconds)
document.querySelector('[data-on-loading]').addEventListener('click', () => {
  Dialog.loading('Processing...');
  setTimeout(() => Dialog.close(), 2000);
});
Previous DataTable Next Dropzone