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.

                                                
                                                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