Default

The default dialog gives you a blank canvas with a close icon. Tapping the scrim or close icon will dismiss it.

Non dismissible

In cases when you want the user to explicitly make or accept the choice, the non dismissible configuration means the dialog has no close icon, and tapping the scrim will not dismiss it. Instead, the user must interact with the dialog's content in order to dismiss it.

With icon

The icon dialog creates a default dialog with an icon placed at the top. It comes in three styles: primary, warning and destructive.

With flare

The flare dialog creates a default dialog with a flare view added as the header.

                                                
                                                import { Component } from 'react';
                                                import BpkDialog from '@skyscanner/backpack-web/bpk-component-dialog';
                                                import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
                                                
                                                class App extends Component {
                                                  constructor() {
                                                    super();
                                                
                                                    this.state = {
                                                      isOpen: false,
                                                    };
                                                  }
                                                
                                                  onOpen = () => {
                                                    this.setState({
                                                      isOpen: true,
                                                    });
                                                  };
                                                
                                                  onClose = () => {
                                                    this.setState({
                                                      isOpen: false,
                                                    });
                                                  };
                                                
                                                  render() {
                                                    return (
                                                      <div id="dialog-container">
                                                        <div id="pagewrap">
                                                          <BpkButton onClick={this.onOpen}>Open dialog</BpkButton>
                                                        </div>
                                                        <BpkDialog
                                                          ariaLabel="example dialog to showcase component"
                                                          closeLabel="Close dialog"
                                                          id="my-dialog"
                                                          className="my-classname"
                                                          isOpen={this.state.isOpen}
                                                          onClose={this.onClose}
                                                          getApplicationElement={() => document.getElementById('pagewrap')}
                                                          renderTarget={() => document.getElementById('dialog-container')}
                                                        >
                                                          This is a dialog. You can put anything you want in here.
                                                        </BpkDialog>
                                                      </div>
                                                    );
                                                  }
                                                }

Props