Default
The default modal has a title and a close button. On mobile viewports, it always occupies the entire screen. On desktop viewports, it comes in two widths: regular and wide.
Wide
Text button
Modals can be configured to display the close button as text - useful for when a close icon doesn't fit the context.
Full screen
Modals are always full screen on mobile.
They can be configured to occupy the full screen on desktop too. This should only be used in exceptional circumstances as part of a considered workflow.
bpk-component-modal
Backpack modal component.
Installation
Check the main Readme for a complete installation guide.
Usage
import { Component } from 'react';
import BpkModal from '@skyscanner/backpack-web/bpk-component-modal';
import { BpkButton } from '@skyscanner/backpack-web/bpk-component-button';
import { BpkNavigationBarButtonLink } from '@skyscanner/backpack-web/bpk-component-navigation-bar';
class App extends Component {
constructor() {
super();
this.state = {
isOpen: false,
};
}
onOpen = () => {
this.setState({
isOpen: true,
});
};
onClose = () => {
this.setState({
isOpen: false,
});
};
render() {
return (
<div id="modal-container">
<div id="pagewrap">
<BpkButton onClick={this.onOpen}>Open modal</BpkButton>
</div>
<BpkModal
id="my-modal"
isOpen={this.state.isOpen}
onClose={this.onClose}
title="Modal title"
closeLabel="Close modal"
getApplicationElement={() => document.getElementById('pagewrap')}
renderTarget={() => document.getElementById('modal-container')}
accessoryView={
<BpkNavigationBarButtonLink
label="Close"
onClick={this.onClose}
className={getClassName('bpk-modal__leading-button')}
>
<div>
Back to results
</div>
</BpkNavigationBarButtonLink>
}
>
This is a modal. You can put anything you want in here.
</BpkModal>
</div>
);
}
}Props
Check out the full list of props on Skyscanner's design system documentation website.