---
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>
