---
name: Modal
route: /Modal
menu: components
---

import { Playground, Props } from 'docz'
import { Modal } from './'
import { Button } from '../Button'
import { Text } from '../Text'
import { Spacer } from '../Spacer'

# Modal

<Props of={Modal} />

## Usage

<Playground>
    {() => {
      const [isOpen, setIsOpen] = React.useState(false)
      const toggleIsOpen = () => setIsOpen(!isOpen)

      return (
        <div>
          <Button onClick={toggleIsOpen}>Toggle Modal</Button>
          <Modal isOpen={isOpen} title="An Awesome Modal" handleClose={toggleIsOpen}>
            <Modal.Title>Title of this modal.</Modal.Title>
            <Modal.Body>
              <Text>Pleased to meet you.</Text>
            </Modal.Body>
            <Modal.Footer>
              I am the footer.
            </Modal.Footer>
          </Modal>
        </div>
      )
    }}

</Playground>
