Leaf UI
  • English

      • Confirm

      Ask for confirmation before an important action.

      Async confirmation

      Live previewAsync confirmation
      basic.tsx
      import { Button, useConfirm, useMessage } from '@sudden3/leaf-ui';
export function ConfirmBasic() {
  const { confirm, contextHolder } = useConfirm();
  const feedback = useMessage();
  return (
    <>
      <Button
        danger
        variant="outline"
        onClick={async () => {
          const accepted = await confirm({
            title: 'Delete project',
            children: 'This cannot be undone. Continue?',
            type: 'danger',
            onConfirm: () => new Promise((resolve) => setTimeout(resolve, 900)),
          });
          if (accepted) feedback.message.success('Project deleted');
        }}
      >
        Delete project
      </Button>
      <div className="leaf-demo-row">
        {(['default', 'info', 'success', 'warning'] as const).map((type) => (
          <Button
            key={type}
            variant="outline"
            onClick={() =>
              confirm({
                type,
                title: {
                  default: 'Confirmation',
                  info: 'Information',
                  success: 'Success',
                  warning: 'Warning',
                }[type],
                children: 'Please review this notice.',
              })
            }
          >
            {type}
          </Button>
        ))}
      </div>
      {contextHolder}
      {feedback.contextHolder}
    </>
  );
}

      Confirm API

      PropertyTypeDefaultDescription
      openbooleanRequiredWhether the dialog is visible
      title / childrenReactNode—Title / confirmation content
      widthnumber | string480Width; numbers are pixels
      closable / keyboardbooleantrueClose button / Escape dismissal
      maskClosablebooleanfalseBackdrop dismissal
      onClose() => void—Requests closure; update open in the application
      afterClose() => void—Called after the closing animation finishes
      confirmText / cancelTextReactNodeLocale defaultConfirm / cancel labels from the current locale
      type'default' | 'danger' | 'success' | 'warning' | 'info''default'Icon and color; only danger changes the confirm button
      showCancelbooleanfalse for success; true otherwiseShow the cancel button
      dangerbooleanfalseLegacy shorthand for type="danger"
      onConfirm() => void | Promise<void>—Confirm action; resolves to close, rejects to show an error

      useConfirm API

      PropertyTypeDefaultDescription
      confirm(options: ConfirmOptions) => Promise<boolean>—Resolves true on confirmation, false on cancellation or unmount
      contextHolderReactNode—Render inside the target ConfigProvider

      ConfirmOptions

      PropertyTypeDefaultDescription
      title / childrenReactNode—Title and confirmation content
      confirmText / cancelTextReactNodeLocale defaultButton labels
      type'default' | 'danger' | 'success' | 'warning' | 'info''default'Icon and color; only danger changes the confirm button
      showCancelbooleanfalse for success; true otherwiseShow the cancel button
      dangerbooleanfalseLegacy shorthand for type="danger"
      onConfirm() => void | Promise<void>—Runs on confirmation; rejection keeps the dialog open
      widthnumber | string480Dialog width
      closable / keyboardbooleantrueClose button / Escape dismissal
      maskClosablebooleanfalseBackdrop dismissal

      Types

      Import types when defining reusable component props or assembling options.

      import type { ConfirmProps, ConfirmOptions } from '@sudden3/leaf-ui';

      Usage notes

      useConfirm returns confirm and contextHolder. Render the holder inside ConfigProvider to inherit regional settings. You can also render Confirm directly and control open and onClose. Async confirmation displays a loading state and prevents duplicate actions.

      See Modal API for inherited attributes.

      default has no icon. info, warning, success and danger have distinct icons and colors. Only danger has a red OK button; success hides Cancel by default. Use showCancel to override it. Button props follow Modal. onCancel notifies cancellation before onClose.