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
Trigger
prop to theModal
component. This will render the trigger component and handle the click event to open the modal. - Use the
open/setOpen
props 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>
</>
);
}