Modal

Modals are used to display content or views that are separate from the rest of the app or page.

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.

Storybook failed to load.

Wide

Storybook failed to load.

Text button

Modals can be configured to display the close button as text - useful for when a close icon doesn't fit the context.

Storybook failed to load.

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.

Storybook failed to load.

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.

Props

Storybook failed to load.