ComponentsConfirm Dialog

Confirm Dialog

A singleton, promise-based confirmation system inspired by Sonner. Handles multiple stacked dialogs with ease.

Singleton

Promise-Based

Interactive Demo

Test the functional API. Notice how dialogs stack and scale when triggered simultaneously.

Installation

pnpm dlx shadcn@latest add https://micto-ui-kit.misangono.net/r/micto/confirm-dialog.json

Setup

Add the ConfirmProvider to your root layout or app component. This ensures the confirmation stack is available globally.

import { ConfirmProvider } from "@/components/micto/confirm-dialog"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <ConfirmProvider />
      </body>
    </html>
  )
}

Functional API Usage

Import confirmDialog and await the result. No component wrapping or local state required per call.

import { confirmDialog } from "@/components/micto/confirm-dialog"

export function DeleteButton() {
  const handleDelete = async () => {
    const ok = await confirmDialog({
      title: "Are you absolutely sure?",
      body: "This action cannot be undone. This will permanently delete your account.",
      icon: "danger",
      confirmText: "Delete Account",
    });

    if (ok) {
      // Proceed with deletion
    }
  }

  return <Button onClick={handleDelete}>Delete</Button>
}

API Reference

Options passed to the lifecycle functions.

confirmDialog(options)

Prop	Type	Default	Description
title	string	undefined	The title of the dialog shown in bold.
body	string \| ReactNode	required	The main content of the alert. Supports custom components.
icon	'warning' \| 'danger' \| 'info' \| 'ghost'	'warning'	The visual style and Lucide icon to display.
confirmText	string	'Confirm'	Text for the primary action button.
cancelText	string	'Cancel'	Text for the secondary/dismiss action button.
onConfirm	() => Promise<boolean \| void> \| boolean \| void	undefined	Optional async handler called when confirming. Returning false prevents closing.
onCancel	() => void	undefined	Optional callback called when the dialog is dismissed or cancelled.
size	'sm' \| 'md' \| 'lg'	'md'	The width and text size profile of the dialog.
className	string	undefined	Tailwind classes to override the dialog styling (e.g. width, text-alignment).
dismissable	boolean	true	Whether clicking the backdrop closes the dialog.

ConfirmProvider

Prop	Type	Default	Description
defaultSize	'sm' \| 'md' \| 'lg'	'md'	Setting a project-wide default size for all confirmations.
className	string	undefined	Styling the backdrop and stack container globally.

PreviousApproval Workflow NextDaily Time Record