Dialog · Panel

Basic Action

Ideal for standard user confirmations like submitting a form or saving preferences.

window.saveSettings = async function() {
  const ok = await MVConfirmDialog.show({
    title: 'Save settings',
    message: 'Are you sure you want to save the current configuration?',
    confirmText: 'Save',
    cancelText: 'Cancel',
    variant: 'primary',
    icon: 'question',
  });

  if (ok) {
    MVToast.show({
      icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>`,
      message: 'Your settings have been updated successfully.',
      appearance: 'solid',
      variant: 'success',
    });
  } else {
    MVToast.show({
      icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>`,
      message: 'Action cancelled.',
      appearance: 'solid',
      variant: 'destructive',
    });
  }
}

Warning Action

Useful for actions that require caution, such as resetting configurations or restoring default values.

window.resetConfig = async function() {
  const ok = await MVConfirmDialog.show({
    title: 'Reset configuration',
    message: 'This will restore all default values. Do you wish to proceed?',
    confirmText: 'Yes, reset',
    cancelText: 'Cancel',
    variant: 'warning',
    icon: 'warning',
  });

  if (ok) {
    MVToast.show({
      icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>`,
      message: 'System settings have been restored.',
      appearance: 'solid',
      variant: 'warning',
    });
  } else {
    MVToast.show({
      icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>`,
      message: 'Reset cancelled.',
      appearance: 'solid',
      variant: 'secondary',
    });
  }
}

Destructive Action

Ideal for critical actions such as deleting a customer or database record permanently.

window.deleteItem = async function() {
  const ok = await MVConfirmDialog.show({
    title: 'Delete client',
    message: 'Are you sure you want to delete Juan Pérez? This action cannot be undone.',
    confirmText: 'Delete',
    cancelText: 'Cancel',
    variant: 'destructive',
    icon: 'error',
  });

  if (ok) {
    MVToast.show({
      icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>`,
      message: 'The client has been deleted successfully.',
      appearance: 'solid',
      variant: 'destructive',
    });
  } else {
    MVToast.show({
      icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>`,
      message: 'Deletion cancelled.',
      appearance: 'solid',
      variant: 'secondary',
    });
  }
}

Approval Action

Great for confirming workflow transitions, like approving an invoice or order.

window.approveOrder = async function() {
  const ok = await MVConfirmDialog.show({
    title: 'Approve order #1048',
    message: 'Once approved, the order will be sent to the shipping department.',
    confirmText: 'Approve',
    cancelText: 'Back',
    variant: 'success',
    icon: 'success',
  });

  if (ok) {
    MVToast.show({
      icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>`,
      message: 'Order #1048 has been approved.',
      appearance: 'solid',
      variant: 'success',
    });
  } else {
    MVToast.show({
      icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>`,
      message: 'Approval cancelled.',
      appearance: 'solid',
      variant: 'secondary',
    });
  }
}

Documentation

Option	Type	Default	Description
`title`	`string`	`'Confirm'`	The header title of the dialog.
`message`	`string`	`'Are you sure?'`	The descriptive text message inside the dialog.
`html`	`string`	`undefined`	Custom HTML content (takes precedence over `message` if provided).
`confirmText`	`string`	`'Accept'`	Text label for the confirmation button.
`cancelText`	`string`	`'Cancel'`	Text label for the cancel button.
`showCancelButton`	`boolean`	`true`	Determines whether the cancel button is visible.
`variant`	`string`	`'primary'`	Button variant style (`primary`, `destructive`, `warning`, `success`, `info`).
`icon`	`string \| false`	`'question'`	Icon type (`warning`, `question`, `info`, `success`, `error`) or `false` to hide it.

<div class="mv-table-container">
  <table class="mv-table">
    <thead>
      <tr>
        <th>Option</th>
        <th>Type</th>
        <th>Default</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><code>title</code></td>
        <td><code>string</code></td>
        <td><code>'Confirm'</code></td>
        <td>The header title of the dialog.</td>
      </tr>
      <tr>
        <td><code>message</code></td>
        <td><code>string</code></td>
        <td><code>'Are you sure?'</code></td>
        <td>The descriptive text message inside the dialog.</td>
      </tr>
      <tr>
        <td><code>html</code></td>
        <td><code>string</code></td>
        <td><code>undefined</code></td>
        <td>Custom HTML content (takes precedence over <code>message</code> if provided).</td>
      </tr>
      <tr>
        <td><code>confirmText</code></td>
        <td><code>string</code></td>
        <td><code>'Accept'</code></td>
        <td>Text label for the confirmation button.</td>
      </tr>
      <tr>
        <td><code>cancelText</code></td>
        <td><code>string</code></td>
        <td><code>'Cancel'</code></td>
        <td>Text label for the cancel button.</td>
      </tr>
      <tr>
        <td><code>showCancelButton</code></td>
        <td><code>boolean</code></td>
        <td><code>true</code></td>
        <td>Determines whether the cancel button is visible.</td>
      </tr>
      <tr>
        <td><code>variant</code></td>
        <td><code>string</code></td>
        <td><code>'primary'</code></td>
        <td>Button variant style (<code>primary</code>, <code>destructive</code>, <code>warning</code>, <code>success</code>, <code>info</code>).</td>
      </tr>
      <tr>
        <td><code>icon</code></td>
        <td><code>string | false</code></td>
        <td><code>'question'</code></td>
        <td>Icon type (<code>warning</code>, <code>question</code>, <code>info</code>, <code>success</code>, <code>error</code>) or <code>false</code> to hide it.</td>
      </tr>
    </tbody>
  </table>
</div>