1// Via framework (recommended)
2import { ConfirmModal, Button } from '@hua-labs/hua';
3// Or direct import
4// import { ConfirmModal } from '@hua-labs/ui/overlay';
5import { useState } from 'react';
6 
7const [isOpen, setIsOpen] = useState(false);
8 
9<Button onClick={() => setIsOpen(true)}>Delete</Button>
10 
11<ConfirmModal
12  isOpen={isOpen}
13  onClose={() => setIsOpen(false)}
14  onConfirm={() => {
15    console.log('Confirmed!');
16    setIsOpen(false);
17  }}
18  title="Delete Item"
19  message="Are you sure you want to delete this item?"
20/>

1<ConfirmModal
2  isOpen={isOpen}
3  onClose={() => setIsOpen(false)}
4  onConfirm={handleConfirm}
5  type="warning"
6  title="Warning"
7  message="This action may affect other items."
8  warning="Proceed with caution."
9/>

1const [inputValue, setInputValue] = useState('');
2 
3<ConfirmModal
4  isOpen={isOpen}
5  onClose={() => setIsOpen(false)}
6  onConfirm={handleDelete}
7  title="Delete Account"
8  message="Type 'DELETE' to confirm."
9  showInput
10  inputLabel="Confirmation"
11  inputPlaceholder="Type DELETE"
12  requiredInputValue="DELETE"
13  inputValue={inputValue}
14  onInputChange={setInputValue}
15/>

1const [isLoading, setIsLoading] = useState(false);
2 
3<ConfirmModal
4  isOpen={isOpen}
5  onClose={() => setIsOpen(false)}
6  onConfirm={async () => {
7    setIsLoading(true);
8    await performAction();
9    setIsLoading(false);
10    setIsOpen(false);
11  }}
12  title="Processing"
13  message="Please wait..."
14  loading={isLoading}
15/>