Modal

v1.1.0

bash

npm install @hua-labs/hua

tsx

import { Modal } from "@hua-labs/hua";


`isOpen*`	`boolean`	-	Controls whether the modal is visible
`onClose*`	`() => void`	-	Callback when modal should close
`title`	`string`	-	Modal header title
`description`	`string`	-	Modal header description
`size`	`"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl"`	`"md"`	Modal width size
`closable`	`boolean`	`true`	Show close button (recommended)
`closeOnOverlayClick`	`boolean`	`true`	Close modal when clicking overlay
`showBackdrop`	`boolean`	`true`	Show backdrop overlay
`centered`	`boolean`	`true`	Center modal vertically
`className`	`string`	-	Additional CSS classes for modal content
`backdropClassName`	`string`	-	Additional CSS classes for backdrop

docs:common.basicUsagetsx

1// Via framework (recommended)
2import { Modal, Button } from '@hua-labs/hua';
3// Or direct import
4// import { Modal } from '@hua-labs/ui/overlay';
5 
6const [isOpen, setIsOpen] = useState(false);
7 
8<Button onClick={() => setIsOpen(true)}>Open Modal</Button>
9 
10<Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
11  <p>Modal content goes here</p>
12</Modal>

With Titletsx

1<Modal
2  isOpen={isOpen}
3  onClose={() => setIsOpen(false)}
4  title="Confirm Action"
5  description="Are you sure you want to continue?"
6>
7  <div className="flex gap-2 mt-4">
8    <Button variant="outline" onClick={() => setIsOpen(false)}>
9      Cancel
10    </Button>
11    <Button onClick={handleConfirm}>Confirm</Button>
12  </div>
13</Modal>

Different Sizestsx

1<Modal
2  isOpen={isOpen}
3  onClose={() => setIsOpen(false)}
4  size="xl" // sm, md, lg, xl, 2xl, 3xl
5  title="Large Modal"
6>
7  <p>Large content area</p>
8</Modal>

•Role & ARIA: Uses role='dialog' with aria-modal='true'
•Keyboard: Escape key closes modal, focus is trapped within
•Scroll Lock: Body scroll is locked when modal is open

PageNavigation ConfirmModal