Drawer

Drawer can be used to show additional UI to the users that are not necessarily needs to be part of the main page. Internally, it works a lot like Dialog.

When a Drawer is opened, scroll on the page are automatically locked, and focus are trapped within the Drawer. A Drawer must have a focusable element inside of it, as it will attempt to focus on the element when the Drawer opens.

Clicking anywhere on the overlay will call the onClose prop to close the Drawer. Pressing the Esc key also has the same effect.

Manually setting initial focus

By default, opening a Drawer will focus on the close button. A custom initial focus can be set by passing a reference to the element via the initialFocus prop.