ConfirmDialogProvider

Guidelines#

Options: title, description, confirmText (default "Confirm"), cancelText (default "Cancel"), variant (default | destructive), and onConfirm (may return a promise — the action shows a spinner until it settles, then the dialog closes).

Destructive treatment: a 48px round red tile with AlertTriangle, and a red action button.

Write it like this: a specific title with the object's name ("Disconnect claire@northwind.io?"), the consequence in the description ("Its 2 running campaigns pause until you connect another sender."), and verbs on both buttons ("Keep connected" / "Disconnect").

Facts#

API#

TypeScript declarations emitted from src/components/shared/confirm-dialog.tsx (the module also exports ConfirmDialogProvider, useConfirm).

export declare function ConfirmDialogProvider({ children }: {
    children: ReactNode;
}): JSX.Element;
export declare function useConfirm(): any;

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function Asker() {
  var confirm = DC.useConfirm().confirm;
  React.useEffect(function () {
    confirm({ title: "Disconnect claire@northwind.io?", description: "Its 2 running campaigns pause until you connect another sender.", confirmText: "Disconnect", cancelText: "Keep connected", variant: "destructive", onConfirm: function () {} });
  }, []);
  return h(DC.Button, { variant: "outline" }, "Disconnect mailbox");
}
function App() { return h(DC.ConfirmDialogProvider, null, h(Asker)); }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Overlays#