ConfirmModal

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

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/>