Search code examples
javascriptnode.jswindowselectronmessagebox

How to show custom Windows message box buttons next to each other using Electron.js

I am trying to make a message box using the Electron.js dialog method showMessageBoxSync. I would like the buttons to be 'Cancel' and 'Overwrite and Continue'. I would like it to display in the same way as the box does when the buttons are 'Cancel' and 'OK'.

When the buttons are 'Cancel' and 'OK', the buttons display side-by-side:

Windows message box with OK and Cancel buttons side by side

However when I try setting the buttons to 'Cancel' and 'Overwrite and Continue' the message box displays differently:

Windows message box with Overwrite and Continue button displaying in a different part of the box to the Cancel button

Is it possible to set the 'Overwrite and Continue' button to display the same way as the 'OK' button?

My code for the message box is:

const userSelection = dialog.showMessageBoxSync(mainWindow, {
    type: 'warning',
    title: 'User data already exists in this location',
    message: 'User data for the App already exists in this location. Do you want to overwrite it?',
    buttons: ['Cancel', 'Overwrite and Continue'],
    defaultId: 0,
    cancelId: 0
})
Solution

  • You must use the noLink property described in the docs:

    noLink Boolean (optional) - On Windows Electron will try to figure out which one of the buttons are common buttons (like "Cancel" or "Yes"), and show the others as command links in the dialog. This can make the dialog appear in the style of modern Windows apps. If you don't like this behavior, you can set noLink to true.

    So, in your case, you'd want to add noLink: true to your options object.