ConfirmProvider

Code

import { Button, ConfirmProvider, NasaqProvider, useConfirm } from "@fadymondy/nasaq/web";declare function deleteProject(id: string): Promise<void>;function DeleteProject({ id, name }: { id: string; name: string }) {  const confirm = useConfirm();  async function onDelete() {    if (!(await confirm({ title: `Delete ${name}?`, description: "Its tasks and files are deleted too. This can't be undone.", confirmLabel: "Delete" }))) return;    await deleteProject(id);  }  return <Button variant="danger" onClick={onDelete}>Delete</Button>;}export function App() {  return (    <NasaqProvider>      <ConfirmProvider>        <DeleteProject id="p1" name="Billing" />      </ConfirmProvider>    </NasaqProvider>  );}

Overlays · beta

Live examples and controls: ConfirmProvider in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/confirm-provider.json

Mount it once, then call useConfirm() anywhere. confirm(options) opens an AlertDialog and resolves true or false, so the code that deletes stays in one handler.

When to useCopy Anchor Link

• Handlers that need a "yes" first: delete from a menu, leave with unsaved changes, bulk actions.
• When the trigger is not a button you render (a keyboard shortcut, a context menu, a table action).

When not to useCopy Anchor Link

• One button that confirms before it acts: use ConfirmButton from AlertDialog.
• Undoable actions: act at once and offer Undo in a Toast.
• Dialogs with fields: use Dialog.

ImportCopy Anchor Link

import { ConfirmProvider, useConfirm } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { Button, ConfirmProvider, NasaqProvider, useConfirm } from "@fadymondy/nasaq/web";

declare function deleteProject(id: string): Promise<void>;

function DeleteProject({ id, name }: { id: string; name: string }) {
  const confirm = useConfirm();
  async function onDelete() {
    if (!(await confirm({ title: `Delete ${name}?`, description: "Its tasks and files are deleted too. This can't be undone.", confirmLabel: "Delete" }))) return;
    await deleteProject(id);
  }
  return <Button variant="danger" onClick={onDelete}>Delete</Button>;
}

export function App() {
  return (
    <NasaqProvider>
      <ConfirmProvider>
        <DeleteProject id="p1" name="Billing" />
      </ConfirmProvider>
    </NasaqProvider>
  );
}

AnatomyCopy Anchor Link

ConfirmProvider
├─ children
└─ AlertDialog                  data-slot="confirm-dialog"
   ├─ title, description
   └─ Cancel, Confirm           Confirm is danger unless `danger: false`

APICopy Anchor Link

ConfirmProvider: { children }. Place it inside NasaqProvider.

useConfirm(): ConfirmFn: throws when there is no provider above.

ConfirmOptions

The promise resolves false on Cancel, Escape or a click outside. A new confirm() while one is open resolves the first with false.

AccessibilityCopy Anchor Link

• It is an AlertDialog: focus moves into it, starts on Cancel, and returns to the trigger on close.
• The title and description name the dialog.

RTL & i18nCopy Anchor Link

• Default button labels follow the Nasaq locale (English and Arabic). Pass localised title and description.

Styling & tokensCopy Anchor Link

• Inherits AlertDialog and Button. Target [data-slot="confirm-dialog"].

Do / Don'tCopy Anchor Link

• Do write the consequence in description.
• Do label Confirm with the verb, not "OK".
• Don't confirm things that can be undone; that teaches people to click through.

RelatedCopy Anchor Link

• AlertDialog
• Dialog
• Toast

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-overlays-confirm-provider--docs