Drawer

Drawers slide in from the edge of the screen and are used to display content.

Default

The default drawer has a title and a close button.

Open in Storybook

Text button

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

Open in Storybook

bpk-component-drawer

Backpack drawer component.

Installation

Check the main Readme for a complete installation guide.

Usage

import BpkDrawer from '@skyscanner/backpack-web/bpk-component-drawer';
import { BpkButtonV2 as BpkButton } from '@skyscanner/backpack-web/bpk-component-button';
import { useState } from 'react';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  render() {
    return (
      <div>
        <div id="pagewrap">
          <BpkButton onClick={() => setIsOpen(true)}>Open drawer</BpkButton>
        </div>
        <BpkDrawer
          id="my-drawer"
          isOpen={isOpen}
          onClose={() => setIsOpen(false)}
          title="Drawer title"
          closeLabel="Close drawer"
          getApplicationElement={() => document.getElementById('pagewrap')}
        >
          This is a drawer. You can put anything you want in here.
        </BpkDrawer>
      </div>
    );
  }
}

Props

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

Props

Open in Storybook