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


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.


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.


Check the main Readme for a complete installation guide.


                                                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() {
                                                    this.state = {
                                                      isOpen: false,
                                                  onOpen = () => {
                                                      isOpen: true,
                                                  onClose = () => {
                                                      isOpen: false,
                                                  render() {
                                                    return (
                                                      <div id="modal-container">
                                                        <div id="pagewrap">
                                                          <BpkButton onClick={this.onOpen}>Open modal</BpkButton>
                                                          title="Modal title"
                                                          closeLabel="Close modal"
                                                          getApplicationElement={() => document.getElementById('pagewrap')}
                                                          renderTarget={() => document.getElementById('modal-container')}
                                                                Back to results
                                                          This is a modal. You can put anything you want in here.

Note: In order to "hide" your application from screen readers whilst the modal is open you need to let it know what the root element for your application is by returning it's DOM node via the function passed to the getApplicationElement prop (see the example above). The pagewrap element id is a convention we use internally at Skyscanner. In most cases it should "just work".

Theming: In order to theme the modal, a renderTarget needs to be supplied as a function which returns a DOM node in the scope of a BpkThemeProvider.


Property PropType Required Default Value
id string true -
children node true -
isOpen bool true -
onClose func true -
getApplicationElement func true -
title string true -
accessoryView node false null
className string false null
contentClassName string false null
closeLabel string false null
closeText string false null
renderTarget func false null
wide bool false false
fullScreenOnMobile bool false true
fullScreen bool false false
closeOnScrimClick bool false true
showHeader bool false true
closeOnEscPressed bool false true
padded bool false true


The accessory view allows for icons and actions to be placed in front of the main title inside the modal header. To be used with BpkNavigationBarButtonLink

Theme Props

  • linkColor
  • linkHoverColor
  • linkActiveColor
  • linkVisitedColor