Modals

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

const Modal = require('gitbook-styleguide/lib/Modal');

Example

<Modal>
<Modal.Heading title="Title" />
<Modal.Body>
Body of the modal
</Modal.Body>
<Modal.Footer>
<Button style="secondary">Cancel</Button>
<Button style="primary">Important action</Button>
</Modal.Footer>
</Modal>

With a backdrop


<Button onClick={event => this.setState({ open: true })}>Open modal</Button>
{this.state.open ?
<Backdrop wrapper={<Modal.Backdrop />} onClose={event => this.setState({ open: false })}>
<Modal>
<Modal.Heading title="Title" />
<Modal.Body>
Body of the modal
</Modal.Body>
<Modal.Footer>
<Button style="secondary" onClick={event => this.setState({ open: false })}>Cancel</Button>
<Button style="primary">Important action</Button>
</Modal.Footer>
</Modal>
</Backdrop>
: null}