ConfirmationDialog

Stable

A ready-made confirm/cancel dialog with async loading and error handling, plus an imperative useConfirm() hook.

ConfirmationDialog wraps AlertDialog with the props most confirmations need. When onConfirm returns a Promise, the confirm button shows a spinner, Cancel and Escape are blocked, the dialog closes on success and shows the error message on failure. ConfirmProvider and useConfirm() give you `await confirm({...})` from any event handler, which replaces window.confirm and hand-rolled confirm contexts.

Source Edit docs Report an issue

Overview

tsx

import { Button, ConfirmationDialog } from '@bindshq/stance-react';

export function Basic() {
  return (
    <ConfirmationDialog
      trigger={<Button variant="danger">Remove user</Button>}
      title="Remove Ada Lovelace?"
      description="Ada loses access to Binds immediately. Their signatures stay in place."
      confirmLabel="Remove user"
      tone="danger"
      onConfirm={() => {}}
    />
  );
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Light

Dark

High contrast

Import

tsx

import { ConfirmationDialog, ConfirmProvider, useConfirm } from '@bindshq/stance-react';

Platforms

ConfirmationDialog has native counterparts. They share Stance tokens and intent, and use each platform’s own controls and conventions. The live previews on this page are the web implementation.

tsx

import { ConfirmationDialog, ConfirmProvider, useConfirm } from '@bindshq/stance-react';

Examples

Async confirm

Return a Promise from onConfirm. This example fails once, then succeeds.

tsx

import * as React from 'react';
import { Button, ConfirmationDialog } from '@bindshq/stance-react';

export function Async() {
  const attempts = React.useRef(0);
  return (
    <ConfirmationDialog
      trigger={<Button>Deploy signatures</Button>}
      title="Deploy to 128 mailboxes?"
      description="Signatures are pushed through your Exchange relay."
      confirmLabel="Deploy"
      loadingText="Deploying…"
      onConfirm={() =>
        new Promise<void>((resolve, reject) => {
          attempts.current += 1;
          setTimeout(() => {
            if (attempts.current % 2 === 1)
              reject(new Error('Exchange did not respond. Try again.'));
            else resolve();
          }, 1200);
        })
      }
    />
  );
}

useConfirm()

Await the user’s decision inside any handler.

tsx

import * as React from 'react';
import { Button, ConfirmProvider, useConfirm } from '@bindshq/stance-react';

function DeleteButton() {
  const confirm = useConfirm();
  const [status, setStatus] = React.useState('');
  return (
    <div style={{ display: 'grid', gap: 8, justifyItems: 'center' }}>
      <Button
        variant="outline"
        onClick={async () => {
          const ok = await confirm({
            title: 'Archive “Q3 campaign”?',
            description: 'Archived templates can be restored for 30 days.',
            confirmLabel: 'Archive',
          });
          setStatus(ok ? 'Archived.' : 'Kept.');
        }}
      >
        Archive template
      </Button>
      <span aria-live="polite">{status}</span>
    </div>
  );
}

export function Imperative() {
  return (
    <ConfirmProvider>
      <DeleteButton />
    </ConfirmProvider>
  );
}

API reference