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.

Storybook failed to load.

Text button

Drawers 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.

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

Storybook failed to load.