# code-snippets/4.0.0-beta.2/js/components/common/ConfirmDialog.tsx

Code Snippets, version 4.0.0-beta.2. 45 lines.

- Page: https://pluginprobe.com/plugins/code-snippets/4.0.0-beta.2/code/js/components/common/ConfirmDialog.tsx
- Raw: https://pluginprobe.com/plugins/code-snippets/4.0.0-beta.2/raw/js/components/common/ConfirmDialog.tsx
- Modified: 2026-08-04T13:35:40+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/code-snippets/4.0.0-beta.2/code/js/components/common/ConfirmDialog.tsx#L10-L20`.

```tsx
import React from 'react'
import { __ } from '@wordpress/i18n'
import { Button, Flex, Modal } from '@wordpress/components'
import type { ReactNode } from 'react'

export interface ConfirmDialogProps {
	open?: boolean
	title: string
	onConfirm?: VoidFunction
	onCancel: VoidFunction
	confirmLabel?: string
	cancelLabel?: string
	children?: ReactNode,
	confirmButtonClassName?: string
}

export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
	open,
	title,
	onConfirm,
	onCancel,
	children,
	confirmLabel = __('OK', 'code-snippets'),
	cancelLabel = __('Cancel', 'code-snippets'),
	confirmButtonClassName
}) =>
	open
		? <Modal
			title={title}
			onRequestClose={onCancel}
			closeButtonLabel={__('Close dialog', 'code-snippets')}
			isDismissible={true}
		>
			{children}
			<Flex direction="row" justify="flex-end">
				<Button variant="tertiary" onClick={onCancel}>
					{cancelLabel}
				</Button>
				<Button variant="primary" onClick={onConfirm} className={confirmButtonClassName}>
					{confirmLabel}
				</Button>
			</Flex>
		</Modal>
		: null

```