Modal

A modal is a window overlaid on either the primary window or another dialog
window. Contents behind a modal dialog are inert meaning that users cannot
interact with content behind the dialog.

Installation

``sh
yarn add @nature-ui/modal

or

npm i @nature-ui/modal
`

Import components

`jsx
import {
Modal,
ModalBody,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
ModalCloseButton,
} from '@nature-ui/core';
`

Usage

When the modal opens, focus is sent into the modal and set to the first tabbable
element. If there are no tabbled element, focus is set on the ModalContent.

`jsx
export const BasicUsage = () => {
const { isOpen, onOpen, onClose } = useDisclosure();

return (
<>
Open

variant='blur'
scrollBehavior='outside'
isOpen={isOpen}
onClose={onClose}
>




Welcome Home

Sit nulla est ex deserunt ...


onClick={onClose}
className='bg-gray-200 hover:bg-gray-300 transition duration-200 mr-3'
>
Cancel


Save






);
};
`

$3

When the dialog closes, it returns focus to the element that triggered. Set
finalFocusRef to element that should receive focus when the modal opens.

`jsx

export const ReturnFocus = () => {
const { isOpen, onOpen, onClose } = useDisclosure();
const finalRef = React.useRef();

return (
<>



Open Modal


variant='normal'
finalFocusRef={finalRef}
isOpen={isOpen}
onClose={onClose}
>


Modal Title


Sit nulla est ex ...



Close
Secondary Action





);
};

``