ConfirmDialog

“Are you sure”, with an optional warning banner and remember-my-choice. Escape and the close button cancel. Checking the box and confirming persists the answer to localStorage before onConfirm fires. Pair with useConfirm for a promise-returning prompt and useConfirmMemory for the banner that offers to ask again.

Source

Import

import { ConfirmDialog } from "@flanksource/clicky-ui/components";

Demos

Playground · Open in Storybook

Promise Hook · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
cancelLabel	string	Cancel	Defaults to "Cancel".
confirmLabel	string	Confirm	Defaults to "Confirm".
message	ReactNode	—	What proceeding does.
onCancel*	(…) => void	—	—
onConfirm*	(…) => void	—	—
open*	boolean	—	—
remember	{ key: string; label?: string; }	—	Offers "Remember my choice". Only a confirmation is remembered — a remembered cancel would block the action with no prompt left to undo it — and a remembered key makes `useConfirm` resolve without asking. The key is the scope of the answer, so include whatever it must not leak across (an environment, a tenant).
title*	ReactNode	—	Heading, and the dialog's accessible label when it is a string.
variant	enum	default	—
warning	ReactNode	—	The risk, drawn as a warning banner above the message.