# Confirm

- Page: <https://kznlabs.github.io/labsUI/components/confirm>

## Confirm (`confirm`, component)

Promise-based confirm dialog called like toast: await confirm({ title, description, destructive }) resolves true or false. Built on Dialog's alert mode, Cancel takes the first focus, Esc cancels, one host mounted in the layout.

- Install: `npx @kznlabs/labsui add confirm`
- Docs: <https://kznlabs.github.io/labsUI/components/confirm>
- Brings: button, button-variants, dialog, platform, use-controllable-state, utils
- npm: clsx@^2.1.1, lucide-react@1.63.0, motion@14.7.1, tailwind-merge@^3.7.0
- Mount once in the root layout, inside `<MotionProvider>`: `<Confirmer />`

### API

- `confirm(options: ConfirmOptions) => Promise<boolean>`: Asks before acting; resolves true on confirm, false on cancel, Esc or a newer `confirm()`.
`if (await confirm({ title: "Delete project?", destructive: true })) remove()`.
Needs `<Confirmer />` mounted once (root layout).
- `<Confirmer>`: Host for `confirm()`. Mount once, next to `<Toaster />`.

- `type ConfirmOptions = { title: ReactNode; description?: ReactNode; confirmLabel?: ReactNode; cancelLabel?: ReactNode; destructive?: boolean; }`

### Usage

```tsx
if (await confirm({ title: "Delete project?", description: "This cannot be undone.", destructive: true })) remove();
```

### Example: delete-project.tsx

```tsx
"use client";

import { Button } from "@/components/ui/button";
import { confirm } from "@/components/ui/confirm";
import { toast } from "@/components/ui/toast";

export function DeleteProject({ onDelete }: { onDelete: () => Promise<void> }) {
  return (
    <Button
      variant="destructive"
      onClick={async () => {
        const ok = await confirm({
          title: "Delete project?",
          description: "All clips are removed. This cannot be undone.",
          destructive: true,
        });
        if (ok) toast.promise(onDelete(), { loading: "Deleting…", success: "Deleted", error: "Failed" });
      }}
    >
      Delete project
    </Button>
  );
}
```

### Example: use-disclosure.tsx

```tsx
"use client";

import { Drawer, DrawerContent, DrawerTitle } from "@/components/ui/drawer";
import { Button } from "@/components/ui/button";
import { useDisclosure } from "@/lib/use-disclosure";

// Open state for any overlay, opened from anywhere.
export function Cart() {
  const cart = useDisclosure();
  return (
    <>
      <Button onClick={cart.show}>Cart</Button>
      <Drawer {...cart.props}>
        <DrawerContent side="right">
          <DrawerTitle>Your cart</DrawerTitle>
        </DrawerContent>
      </Drawer>
    </>
  );
}
```