UILab

Confirmation Dialog

The Confirmation Dialog component provides a consistent way to ask users for confirmation before performing destructive or important actions

Preview

"use client"

import { Button } from "uilab-core";
import { useConfirmation } from "@/components/confirmation";

Installation

npx shadcn add @uilab-core/confirmation

Usage

Wrap your app with the provider

import { ConfirmationProvider } from '@/components/confirmation';

function App() {
  return (
    <ConfirmationProvider>
      <MyApp />
    </ConfirmationProvider>
  );
}
import { useConfirmation } from '@/components/confirmation';
showDialog({
  title: 'Delete Item',
  description: 'Are you sure you want to delete this item?',
  variant: 'destructive'
  confirmText: 'Delete',
  cancelText: 'Cancel',
  onConfirm: () => {
    // Handle confirmation
  },
})

API References

ConfirmationOptions

Prop

Type

On this page