Small drawer

Large drawer

A drawer is a panel that slides in and out from the right. It’s used to help users complete a task faster and in context, such as to add charges or attachments to a transaction or to complete a quick sub-task.


Drawers come in two sizes, each with a specific purpose:

  1. Large – 565px drawer
    • Used to create/edit entities (think customers, products, appointments), or customize settings in any context.
  2. Small – 265px drawer
    • Used to add existing items to a transaction (in a trowser).

1. Large 565px drawer


  • The task is either creating or editing an entity or customizing the page below.
  • It’s important to stay in context and the sub-task is too complicated for a popover.
  • The same form can be used in multiple places, i.e. on a trowser or on a page with a stage.


2. Small 265px drawer


  • When adding existing items to a transaction (in a trowser).
  • When it’s important to stay in context and the action applies changes to the parent page.

Appearance and behavior

Opening and closing the drawer

565px create/edit drawer


  • Can be opened by clicking on a form field, a table row, a button or other UI elements. A toggle button is not recommended.
  • Always slides in from the right side of the page.
  • If the window is smaller than 1695px, the drawer will need to overlay on top of some or all page content.
  • The parent page content may be disabled until the drawer is closed with a black 60% opacity mask.
  • If the page is at least 1695px, the drawer can sit side by side with the page content because our minimum page width is 1130px and this would provide adequate space for the drawer.
  • Uses the full height of the page, covering any headers and footers present.
  • The drawer disappears completely when closed and relies on a separate control to open it.
  • The animation should use the same speeds and bounce as the trowser (but the drawer animates from the right).

265px add drawer

  • Opens automatically when there are items in the drawer pertaining to the current task.
  • Slides in from the right side of the page and pushes page contents over.
  • Does not cover any headers or footers.
  • May be collapsed using the provided expand/collapse control.
  • The animation should use the same speeds and bounce as the trowser (but the drawer animates from the right).


Click to see the drawer animation.

Drawer panel

  • The panel contains the main content of the Drawer.
  • There is an “X” placed in the top-right corner. It always closes the drawer (and animates it back out.)
  • The title is located on the panel’s top-left corner and scrolls with the content.
  • When placing a form in the drawer:
    • Use the regular forms spec to layout the text input fields, select dropdowns and etc.
    • You can also use Progressive Disclosure to group the content.
    • Avoid using Flow Navigation, Pagination or tabs to keep the Drawer simple.
  • Accepted drawer widths are either 565px or 265px.
    • 565px drawer is treated as a layer on top of the page and therefore fills the entire screen height, covering the header and footer. Content inside can scroll vertically behind the drawer’s sticky footer.
    • 265px drawer is treated as part of the page and therefore does not cover navigation or have a sticky footer. It shares the same background color, title and padding.

Note: Unlike trowsers, drawers are only used for a single step; no flows or tabs should appear in the drawer and the drawer does not stack.

Sticky footer

Adopting the layout and behavior of the Trowser’s sticky footer, the Drawer’s sticky footer permanently anchors to the bottom of the screen and contains most of the page-level actions.

  • The primary action typically saves the changes and closes the Drawer.
  • Since the close X closes the Drawer.



The large drawer behaves the same way across devices. In fact, it replaces other patterns on mobile such as the popover. On phones, the drawer covers 100% the width and height of the device.On tablet, use when:

  • A user needs to make a selection from a large amount of data
  • A user wants to see relevant data while staying in context

The drawer can be opened by:

  • A selection button in a form is triggered.
  • The notes button is triggered.

The drawer can be closed by:

  • The close X on the top right is triggered.
  • Swiped right.


Large 565px drawer: Invoice customization


Small 265px drawer: Add to Receive Payment


Small drawer

Launch Preview
px wide

Large drawer

Launch Preview
px wide

  • Was this Helpful?