Skip to main content

Confirmation Dialogs

Confirmation dialogs prompt users to make a choice before proceeding with an action. They're useful for confirming destructive operations, gathering simple input, or presenting important decisions.

Basic Usage​

Use the confirm command from useMMAppCommands:

import { useMMAppCommands } from '@machinemetrics/mm-react-tools';

function DeleteButton() {
  const { confirm } = useMMAppCommands();

  const handleDelete = async () => {
    const result = await confirm({
      header: 'Delete Machine?',
      body: 'This action cannot be undone.',
      choices: [
        { value: 'cancel', label: 'Cancel' },
        { value: 'delete', label: 'Delete' },
      ],
    });

    if (result === 'delete') {
      await api.deleteMachine(machineId);
    }
  };

  return <button onClick={handleDelete}>Delete</button>;
}

Important: The first choice is selected when the user presses Enter. The last choice is styled as the primary (blue) button. Order choices from least to most destructive.

Parameters​

ParameterTypeRequiredDescription
headerstringYesDialog title
bodystringNoExplanatory text
choicesarrayYesArray of choice objects (minimum 1, maximum 2)

Choice Object​

PropertyTypeRequiredDescription
valuestringYesValue returned when this choice is selected
labelstringYesButton label
variantstringNoButton variant (see Choice Variants below)

Choice Styling​

  • The last choice in the array is styled as the primary (blue) button
  • All other choices are gray buttons
  • The first choice is automatically selected (activated on Enter key)
  • Order your choices from least destructive to most destructive

Choice Variants​

Choices support the same variant values as sidesheet header badges / useMMAppInfo:

Variant
primary
success
warning
danger
alternate
subtle
highlight

If you omit variant, the platform applies the default styling rules described above.

Return Value​

Returns a Promise that resolves to:

  • The value of the selected choice button
  • false if the user presses Escape or closes the dialog

Examples​

Unsaved Changes Warning​

const result = await confirm({
  header: 'Unsaved Changes',
  body: 'You have unsaved changes. Are you sure you want to leave?',
  choices: [
    { value: 'stay', label: 'Stay' },
    { value: 'leave', label: 'Leave' },
  ],
});

if (result === 'leave') {
  navigate('/');
}

The first choice "Stay" is selected by default (on Enter), and "Leave" appears as the blue primary button.

Informational Dialog​

await confirm({
  header: 'Machine Offline',
  body: 'This machine is currently offline and cannot be edited.',
  choices: [{ value: 'ok', label: 'OK' }],
});

Yes/No Decision​

const result = await confirm({
  header: 'Save Configuration?',
  body: 'Would you like to save this configuration as the default?',
  choices: [
    { value: 'no', label: 'No' },
    { value: 'yes', label: 'Yes' },
  ],
});

if (result === 'yes') {
  await saveAsDefault();
}

Handling Escape Key​

const result = await confirm({
  header: 'Delete Item?',
  body: 'This action cannot be undone.',
  choices: [
    { value: 'cancel', label: 'Cancel', variant: 'subtle' },
    { value: 'delete', label: 'Delete', variant: 'danger' },
  ],
});

// result will be false if user pressed Escape
if (result === 'delete') {
  await deleteItem();
}