309

Confirmer

PreviousNext

Imperative confirm dialog implementation.

Docs
"use client";

import { toast } from "sonner";

About

The <Confirmer /> component is built on top of react-call.

Installation

Run the following command:

pnpm dlx shadcn@latest add junwen-k/ui-x/confirmer

Add the <Confirmer /> component.

app/layout.tsx
import { Confirmer } from "@/components/ui/confirmer";
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <main>{children}</main>
        <Confirmer />
      </body>
    </html>
  );
}

Usage

import { confirm } from "@/components/ui/confirmer";
confirm({
  title: "Are you absolutely sure?",
  description:
    "This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
}).then((confirmed) => {
  // ...
});

Examples

Default

"use client";

import { toast } from "sonner";

Accessibility

<Confirmer /> renders an <AlertDialog />, so it inherits Base UI's alert dialog semantics: the dialog traps focus while open, labels itself from <AlertDialogTitle> and <AlertDialogDescription> (the title and description options), and returns focus to the triggering element when it closes.

Pressing Escape or activating the cancel button resolves confirm() with false, mirroring a dismissed dialog. Always pass a title (and a description for anything non-obvious) so screen reader users hear what they're confirming, and set ActionProps={{ variant: "destructive" }} rather than color alone to distinguish destructive actions.

API Reference

Confirmer

The dialog host. Render it once near the root of your app; it renders nothing until confirm is called. Takes no props.

confirm

Opens the confirm dialog imperatively and resolves with the user's choice — true for the action button, false for cancel or dismissing the dialog.

function confirm(options?: ConfirmOptions): Promise<boolean>;
OptionTypeDefaultDescription
titleReactNode"Are you sure?"The dialog title.
descriptionReactNode-The dialog description.
cancelTextReactNode"Cancel"The cancel button label.
actionTextReactNode"Continue"The action button label.
CancelPropsReact.ComponentProps<typeof AlertDialogCancel>-Props spread to the cancel button.
ActionPropsReact.ComponentProps<typeof AlertDialogAction>-Props spread to the action button, e.g. { variant: "destructive" } for destructive confirmations.