Gutenberg Components: Modal | https://www.ibenic.com/gutenberg-components-modal

example.js

import { Button, Modal } from '@wordpress/components';
import { withState } from '@wordpress/compose';

const MyModal = withState( {
	isOpen: false,
} )( ( { isOpen, setState } ) => (
	<div>
		<Button isDefault onClick={ () => setState( { isOpen: true } ) }>Open Modal</Button>
		{ isOpen && (
			<Modal
				title="This is my modal"
				onRequestClose={ () => setState( { isOpen: false } ) }>
				<Button isDefault onClick={ () => setState( { isOpen: false } ) }>
					My custom close button
				</Button>
			</Modal>
		) }
	</div>
) );

optionsModal.jsx

export function OptionsModal( { isModalActive, closeModal } ) {
	if ( ! isModalActive ) {
		return null;
	}

	return (
		<Modal
			className="edit-post-options-modal"
			title={ <span className="edit-post-options-modal__title">{ __( 'Options' ) }</span> }
			closeLabel={ __( 'Close' ) }
			onRequestClose={ closeModal }
		>
			<Section title={ __( 'General' ) }>
				<EnablePublishSidebarOption label={ __( 'Enable Pre-publish Checks' ) } />
				<EnableTipsOption label={ __( 'Enable Tips' ) } />
			</Section>
			<Section title={ __( 'Document Panels' ) }>
				<EnablePanelOption label={ __( 'Permalink' ) } panelName="post-link" />
				<PostTaxonomies
					taxonomyWrapper={ ( content, taxonomy ) => (
						<EnablePanelOption
							label={ get( taxonomy, [ 'labels', 'menu_name' ] ) }
							panelName={ `taxonomy-panel-${ taxonomy.slug }` }
						/>
					) }
				/>
				<EnablePanelOption label={ __( 'Featured Image' ) } panelName="featured-image" />
				<PostExcerptCheck>
					<EnablePanelOption label={ __( 'Excerpt' ) } panelName="post-excerpt" />
				</PostExcerptCheck>
				<EnablePanelOption label={ __( 'Discussion' ) } panelName="discussion-panel" />
				<PageAttributesCheck>
					<EnablePanelOption label={ __( 'Page Attributes' ) } panelName="page-attributes" />
				</PageAttributesCheck>
			</Section>
			<MetaBoxesSection title={ __( 'Advanced Panels' ) } />
		</Modal>
	);
}