ConfirmDialog

v1.0.0

Confirmation dialog for destructive or high-consequence actions.

Import

import { ConfirmDialog } from '@meteorack/sdk-react';

How To Use It

Use it to confirm destructive actions such as reset, delete, uninstall, or enabling a risky mode.
Ask for confirmation only when the action is hard to undo or has significant impact.

Works Well With

Button Notice Modal

Props

open: boolean

Controls whether the confirmation dialog is open.

onConfirm: () => void

Runs when the confirm action is accepted.

onCancel: () => void

Runs when the dialog is dismissed or canceled.

title: string

Primary confirmation prompt.

description?: string

Optional explanatory copy under the title.

confirmLabel?: string

Override for the confirm button label.

cancelLabel?: string

Override for the cancel button label.

variant?: 'default' | 'destructive'

Switches the confirm action styling for risky operations.

children?: ReactNode

Optional extra content rendered under the description.

Example

ConfirmDialog.tsx

import { useState } from 'react';
import { ConfirmDialog, Button } from '@meteorack/sdk-react';

export function DeleteModuleAction() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button variant="danger" onClick={() => setOpen(true)}>
        Delete module
      </Button>

      <ConfirmDialog
        open={open}
        onCancel={() => setOpen(false)}
        onConfirm={() => setOpen(false)}
        title="Delete this module?"
        description="This permanently removes the module configuration from the site."
        confirmLabel="Delete"
        cancelLabel="Keep module"
        variant="destructive"
      >
        <p
          style={{
            marginTop: '12px',
            fontSize: '13px',
            color: 'var(--mck-text-2, #a1a1aa)',
          }}
        >
          Export the configuration first if you might need it again later.
        </p>
      </ConfirmDialog>
    </>
  );
}

PreviousToast NextLoadingOverlay