Confirmation Modal

Action confirmation dialog with clear options and consequences. Perfect for destructive actions, important decisions, and user confirmations.

Features

Multiple variants (default, destructive, warning)
Customizable title and description
Custom button text for confirm and cancel
Loading states during confirmation
Keyboard accessible (ESC to close)
Focus management and ARIA labels

Examples

Default Variant

Destructive Variant

Warning Variant

Usage

import { ConfirmationModal } from '@/components/ui/templates/modal'

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false)
  
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>
        Delete Item
      </Button>
      
      <ConfirmationModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onConfirm={() => {
          console.log('Confirmed!')
          setIsOpen(false)
        }}
        title="Delete Item"
        description="Are you sure you want to delete this item? This action cannot be undone."
        confirmText="Delete"
        cancelText="Cancel"
        variant="destructive"
      />
    </>
  )
}

Props

Prop	Type	Default	Description
isOpen	boolean	-	Controls modal visibility
onClose	() => void	-	Callback when modal is closed
onConfirm	() => void	-	Callback when user confirms action
title	string	-	Modal title text
description	string	-	Modal description text
variant	'default' \| 'destructive' \| 'warning'	'default'	Visual variant of the modal
confirmText	string	'Confirm'	Text for confirm button
cancelText	string	'Cancel'	Text for cancel button