text: // @flow
  import * as React from 'react';
  import {Button} from 'baseui/button';
  import {
    Modal,
    ModalHeader,
    ModalBody,
    ModalFooter,
    ModalButton,
  } from 'baseui/modal';
  
  export default () => {
    const [isOpen, setIsOpen] = React.useState(false);
  
    function close() {
      setIsOpen(false);
    }
  
    return (
      <React.Fragment>
        <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
        <Modal
          onClose={close}
          isOpen={isOpen}
          overrides={{
            Dialog: {
              style: {
                width: '80vw',
                height: '80vh',
                display: 'flex',
                flexDirection: 'column',
              },
            },
          }}
        >
          <ModalHeader>Hello world</ModalHeader>
          <ModalBody style={{flex: '1 1 0'}}>
            Proin ut dui sed metus pharetra hend rerit vel non mi.
            Nulla ornare faucibus ex, non facilisis nisl. Maecenas
            aliquet mauris ut tempus.
          </ModalBody>
          <ModalFooter>
            <ModalButton kind="tertiary" onClick={close}>
              Cancel
            </ModalButton>
            <ModalButton onClick={close}>Okay</ModalButton>
          </ModalFooter>
        </Modal>
      </React.Fragment>
    );
  };
  