Modal

import Modal from 'react-bootstrap/Modal'

{/* Modal dialog component markup */}
<Modal.Dialog>
  <Modal.Header closeButton>
    <Modal.Title as='h5'>Modal title</Modal.Title>
  </Modal.Header>
  <Modal.Body>
    <p>Modal body text goes here.</p>
  </Modal.Body>
  <Modal.Footer>
    <Button variant='secondary' size='sm'>Close</Button>
    <Button variant='primary' size='sm'>Save changes</Button>
  </Modal.Footer>
</Modal.Dialog>

import Modal from 'react-bootstrap/Modal'
import Nav from 'react-bootstrap/Nav'
import Tab from 'react-bootstrap/Tab'
import Fade from 'react-bootstrap/Fade'
import Form from 'react-bootstrap/Form'
import Button from 'react-bootstrap/Button'
import PasswordToggle from '../components/PasswordToggle'

{/* Modal with tabs and forms */}
<Modal.Dialog>
  <Tab.Container defaultActiveKey='signin' transition={Fade}>
    <Modal.Header closeButton>
      <Nav variant='tabs' className='mb-0'>
        <Nav.Item>
          <Nav.Link as='button' eventKey='signin'>
            <i className='fi-login ms-n1 me-2'></i>
            Sign in
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link as='button' eventKey='signup'>
            <i className='fi-user ms-n1 me-2'></i>
            Sign up
          </Nav.Link>
        </Nav.Item>
      </Nav>
    </Modal.Header>
    <Modal.Body className='py-4'>
      <Tab.Content>
        <Tab.Pane as={Form} autoComplete='off' eventKey='signin'>
          <Form.Group className='mb-3' controlId='si-email'>
            <Form.Label>Email address</Form.Label>
            <Form.Control type='email' placeholder='johndoe@example.com' required />
          </Form.Group>
          <Form.Group className='mb-3'>
            <Form.Label htmlFor='si-pass'>Password</Form.Label>
            <PasswordToggle id='si-pass' required />
          </Form.Group>
          <Form.Group className='d-flex flex-wrap justify-content-between mb-3'>
            <Form.Check id='remember' label='Remember me' className='mb-2' />
            <Link href='#' className='fs-sm'>Forgot password?</Link>
          </Form.Group>
          <Button type='submit' variant='primary w-100'>Sign in</Button>
        </Tab.Pane>
        <Tab.Pane as={Form} eventKey='signup'>
          <Form.Group className='mb-3' controlId='su-name'>
            <Form.Label>Full name</Form.Label>
            <Form.Control type='text' placeholder='John Doe' required />
          </Form.Group>
          <Form.Group className='mb-3' controlId='su-email'>
            <Form.Label>Email address</Form.Label>
            <Form.Control type='email' placeholder='johndoe@example.com' required />
          </Form.Group>
          <Form.Group className='mb-3'>
            <Form.Label htmlFor='su-pass'>Password</Form.Label>
            <PasswordToggle id='su-pass' required />
          </Form.Group>
          <Form.Group className='mb-3'>
            <Form.Label htmlFor='su-confirm-pass'>Confirm password</Form.Label>
            <PasswordToggle id='su-confirm-pass' required />
          </Form.Group>
          <Button type='submit' variant='primary w-100'>Sign un</Button>
        </Tab.Pane>
      </Tab.Content>
    </Modal.Body>
  </Tab.Container>
</Modal.Dialog>

import { useState } from 'react'
import Modal from 'react-bootstrap/Modal'
import Button from 'react-bootstrap/Button'

{/* Example of how to lauch modal */}
const ModalExample = () => {
  const [show, setShow] = useState(false)

  const handleClose = () => setShow(false)
  const handleShow = () => setShow(true)

  return (
    <>
      <Button variant='primary' onClick={handleShow}>
        Launch demo modal
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal title</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant='secondary' size='sm' onClick={handleClose}>
            Close
          </Button>
          <Button variant='primary' size='sm' onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  )
}

render(<ModalExample />)


{/* Small modal */}
<Modal size='sm' show={} onHide={}>...</Modal>

{/* Default modal */}
<Modal show={} onHide={}>...</Modal>

{/* Large modal */}
<Modal size='lg' show={} onHide={}>...</Modal>

{/* Extra large modal */}
<Modal size='xl' show={} onHide={}>...</Modal>

{/* Modal with scrollable content (body) */}
<Modal scrollable show={} onHide={}>...</Modal>

{/* Vertically centered modal */}
<Modal centered show={} onHide={}>...</Modal>

{/* Full screen modal */}
<Modal fullscreen show={} onHide={}>...</Modal>