Dialog

Dialogs inform users about a specific task and may contain critical information, or require decisions or acknowledgement.

Default

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

Open in Storybook

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.

Open in Storybook

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.

Open in Storybook

With flare

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

Open in Storybook

bpk-component-dialog

Backpack dialog component.

Installation

Check the main Readme for a complete installation guide.

Usage

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

Check out the full list of props on Skyscanner's design system documentation website.

Props

Open in Storybook