Modal
A modal component for creating dialogs, popovers, and other overlays.
The Modal component renders its children in a modal overlay. It supports various props to customize its behavior, such as fade, blur, and closeOnOutsideClick.
You have to manage the isOpen state and the onClose function yourself.
Usage
The Modal component requires the isOpen and onClose props to control its visibility. We can use it like this:
javascript
1import Modal from "@/components/atoms/Modal";
2import { useState } from "react";
3import Button from "@/components/atoms/Button";
4
5export default function Example() {
6 const [open, setOpen] = useState(false);
7 const handleOpen = () => setOpen(true);
8 const handleClose = () => setOpen(false);
9
10 return (
11 <div>
12 <Button onClick={handleOpen}>Open Modal</Button>
13
14 <Modal
15 isOpen={open}
16 onClose={handleClose}
17 />
18 <div>
19 Modal content goes here.
20 </div>
21 </Modal>
22 </div>
23 );
24}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The content to display inside the modal. |
| isOpen | boolean | - | Whether the modal is open or closed. |
| onClose | function | - | Function to call when the modal is closed. |
| fade | boolean | true | Whether to fade the modal in and out. |
| blur | boolean | true | Whether to blur the background when the modal is open. |
| closeOnOutsideClick | boolean | true | Whether to close the modal when clicking outside of it. |
| showCloseButton | boolean | true | Whether to show the close button in the top right corner of the modal. |
| className | string | "" | Additional Tailwind classes for the modal overlay (not the content). |
| ...props | object | - | Any other valid <div> attributes (e.g. role, aria-*, etc.). |
Examples
Basic Modal
By default, the modal will both blur and fade the background.