The Modal component is a wrapper around the Dialog component - as in it uses some common defaults and provides a few extra props to make it easier to use. For maximum flexibility, you can use the Dialog component directly.
Basic Usage
You can pass any content to the Modal component. The Modal component will take care of the rest. To trigger the modal you have two options:
- Pass a
Triggerprop to theModalcomponent. This will render the trigger component and handle the click event to open the modal. - Use the
open/setOpenprops to control the modal state yourself.
Trigger
Below, we pass the Trigger prop to the Modal component. This will render the trigger component and handle the click event to open the modal.
import { Modal } from '~/core/ui/Modal';
import { Button } from '~/core/ui/Button';
<Modal
heading='Modal'
Trigger={<Button variant='outline'>Click me</Button>}
>
<div className='flex flex-col space-y-4'>
<p>Are you sure you want to continue?</p>
<div className='flex justify-end'>
<Button variant='destructive'>
Yup, I'm sure
</Button>
</div>
</div>
</Modal>Open / setOpen using state
Alternatively, you can use the open and setOpen props to control the modal state yourself.
import { useState } from 'react';
import { Modal } from '~/core/ui/Modal';
import { Button } from '~/core/ui/Button';
function Component() {
const [open, setOpen] = useState(false);
return (
<>
<Button variant='outline' onClick={() => setOpen(true)}>
Click me
</Button>
<Modal
heading='Modal'
open={open}
setOpen={setOpen}
>
<div className='flex flex-col space-y-4'>
<p>Are you sure you want to continue?</p>
<div className='flex justify-end'>
<Button variant='destructive'>
Yup, I'm sure
</Button>
</div>
</div>
</Modal>
</>
);
}