Modal

Standard

In general modals should be used for short interactions such as:

• Confirmation dialogs
• Single input forms

Avoid in cases such as:

• Complex forms

1import Modal from '@components/Modal'
2import { toast } from 'react-toastify'
3import { useState } from 'react'
4
5const StandardModalExample = () => {
6  const [isOpen, setIsOpen] = useState(false)
7
8  return (
9    <>
10      <div className="h-stack spaced">
11        <button className="btn" onClick={() => setIsOpen(true)}>
12          Open modal
13        </button>
14      </div>
15      <Modal isOpen={isOpen} setIsOpen={setIsOpen} title="Are you sure?">
16        <p className="modal-body">
17          By forfeiting all your data for this contest will be deleted and
18          cannot be undone.
19        </p>
20
21        <div className="modal-actions">
22          <button
23            type="button"
24            className="btn danger"
25            onClick={() => {
26              toast.info('Your request is being processed')
27              setIsOpen(false)
28            }}
29          >
30            Yes, delete it
31          </button>
32          <button
33            type="button"
34            className="btn ghost"
35            onClick={() => setIsOpen(false)}
36          >
37            Go back
38          </button>
39        </div>
40      </Modal>
41    </>
42  )
43}