ChangeConfirmationModal

Generic confirmation modal that shows a diff or summary of pending changes before applying them.

import { ChangeConfirmationModal } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`open`	Required	`boolean`	—	—
`title`	Required	`string`	—	—
`onConfirm`	Required	`VoidFunction`	—	—
`onClose`	Required	`VoidFunction`	—	—
`children`	Required	`React.ReactNode`	—	—
`confirmText`	Optional	`string \| undefined`	—	—
`destructive`	Optional	`boolean \| undefined`	—	—

Usage

Generic confirmation dialog that presents a summary of pending changes before applying them. Supports both standard (primary) and destructive (danger) confirmation actions. The body content is passed as children, making it flexible enough to render diffs, item lists, or plain text.

Notes

Closing via the backdrop is disabled to prevent accidental dismissal.
Use destructive={true} any time the action is irreversible (delete, reset, revoke).
For non-destructive confirmations such as applying setting changes, omit destructive or set it to false.

Example

import { useState } from 'react'import { ChangeConfirmationModal } from '@tetherto/mdk-react-devkit'export const ChangeConfirmationModalExample = () => {  const [open, setOpen] = useState(false)  return (    <div className="mdk-example-row">      <button onClick={() => setOpen(true)}>Confirm Change</button>      <ChangeConfirmationModal        open={open}        title="Apply Configuration Changes?"        onConfirm={() => {          console.warn('confirmed')          setOpen(false)        }}        onClose={() => setOpen(false)}        confirmText="Apply"      >        This will update pool assignments for 12 devices.      </ChangeConfirmationModal>    </div>  )}