Skip to content
Telescope

DrawerNew

A panel that slides out from the edge of the screen to focus a user's attention on completing a task or viewing details about an item.
(Psst...click this to see a drawer in action)

Features

  • Traps focus within the drawer and returns focus to the trigger when closed.
  • Locks background scrolling.
  • Includes a 'Close' button for dismissing the drawer.
  • Includes subcomponents to enable easy construction of the drawer's content.

When to use

At Pleo, we use drawers to focus the user's attention on completing a task or viewing details about an item. Our Overlays pattern guidelines explain when to use a drawer instead of a Tooltip, Popover, or Modal.

Task drawer vs. Item drawer

A drawer constructed to complete a task is referred to as a Task drawer, while a drawer constructed to view details about an item is referred to as an Item drawer.

These drawer types are not directly reflected in the API. They are instead a conceptual distinction that helps us design and use drawers effectively.

View the Examples section for demonstrations of both drawer types and consult the Best practices section for guidance on which subcomponents to use in each type.

Examples

Item drawer

A drawer that is used to view details about an item is referred to as an Item drawer. These items could for example be users, vendor cards, or subscriptions. There may be some interactions the user can perform within the drawer. However, the goal is for users to view information about an item, rather than complete an task.

Task drawer

A drawer that is used to complete a task, such as adding an expense or creating a vendor card, is referred to as a Task drawer. The goal of the drawer is to help the user complete the task, and the drawer will close once the task is complete.

Best practices

Do
Use a Drawer to complete a task that requires filling out a form with multiple elements, potentially organized into separate steps.
Don't
Use a Drawer to complete a task that only requires a simple confirmation or filling out a form with a single form element. Use a Modal instead.
Do
Use a Drawer to complete a task that requires a limited amount of content or a simple flow.
Don't
Use a Drawer to complete a task that requires a lot of content or a complex flow, such as adding multiple users, cards or completing the company verification. Use a Page instead.
Do
Use a Drawer when the user needs to focus on one pane concerning a single task or item.
Don't
Use a Drawer when the user needs to interact with both panes to get their job done. For example, investigating an expense open on the right and using the checkboxes in the main list to prepare for bulk actions. Use a split view instead.
Do
Use Tabs in an Item drawer to split up large amounts of information into multiple views.
Don't
Use Tabs in a Task drawer.
Do
Use an Action Menu in the Drawer.ActionBar of an Item drawer if multiple actions can be performed on the item in question.
Don't
Use an Action Menu in the Drawer.ActionBar of a Task drawer.
Do
Use a Drawer.Footer in a Task drawer to signal a decision needs to be made to complete the task at hand.
Don't
Use a Drawer.Footer in an Item drawer.
Do
Use a Wizard in the body of a Task drawer if the task requires multiple steps.
Don't
Use a Wizard in the body of an Item drawer.

Navigating to a drawer

Drawers should always be accessible through a unique link. This allows users to navigate directly to the content of a drawer, both from within and outside the app.

For example, imagine that we have a page with a list of invoices at pleo.io/invoices, the drawer to add a new invoice should be available at pleo.io/invoices/add-invoice

Accessibility

We use @radix-ui/react-dialog to make the Drawer accessibile. It adheres to the Dialog WAI-ARIA design pattern.

By default, the first focusable element in the drawer will receive focus when the drawer opens (normally the close button). You can override this by passing an onOpenFocusRef prop to the Drawer component, which will set focus on the element with the ref you pass in. You should do this where there is a more relevant field that should receive initial focus, for example the first form field, in accordance with the keyboard interaction guidelines outlined in the WAI-ARIA Dialog design pattern.

Related components

  • Modal: A page overlay that displays information and blocks interaction with the page until an action is taken or the modal is dismissed.
  • Page: A collection of components which let you compose a page in our web application.