A modal is highly customizable and includes features like entry and exit animations, customizable underlay and overlay elements, various closing methods, etc.
| Name | Type | Default | Description |
|---|---|---|---|
| position | "center center" | "center top" | "center bottom" | "left top" | "left center" | "left bottom" | "right top" | "right bottom" | "right center" | "center center" | Position of the modal on the screen. |
| isBGBlur | boolean | true | Whether the background should have a blur effect when the modal is open. |
| isDismissable | boolean | true | Whether the modal can be dismissed by clicking outside or pressing the escape key. |
| isOpen | boolean | Controls the open or closed state of the modal. | |
| setOpen | React.Dispatch<React.SetStateAction<boolean>> | Function to update the modal's open state. | |
| className | string | "" | Additional classes to apply to the modal container. |
| children | React.ReactNode | Content to be displayed inside the modal. |
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | null | Content to be displayed inside the modal. |
| className | string | "" | Additional classes to apply to the modal container. |
| isDismissable | boolean | true | Whether the modal can be dismissed by clicking outside or pressing the escape key. |
| position | "center center" | "center top" | "center bottom" | "left top" | "left center" | "left bottom" | "right top" | "right bottom" | "right center" | "center center" | Position of the modal on the screen. |
| isBGBlur | boolean | true | Whether the background should have a blur effect when the modal is open. |
| ...props | DialogProps | Additional props to be passed to the underlying Dialog component. |
| Name | Type | Default | Description |
|---|---|---|---|
| ...props | DialogTriggerProps | Additional props to be passed to the DialogTrigger component. |
A hidden button used for accessibility to close the modal.
Checkout the official documentation of React Aria Modal for more information.