Drawers are panels that slide in and out from the right. They help users complete tasks faster and in context. For example, drawers can help users fill in mileage, groups, inventory, and more.
When to use drawers
The standard desktop drawer focuses the user’s attention on an action or flow. Drawers are temporary workspaces that may overlay and block some or all parent page content. They slide in and out from the right and come in two sizes. Each size serves a purpose.
- Use large drawers (576 px) to create or edit entities like customers, products, or appointments. You can also use large drawers to customize settings in any context.
- Use small drawers (384 px) to add existing items to a transaction in a trowser. Use small drawers when it’s important to stay in context and when the action applies changes to the parent page.
A small drawer (384 px)
What drawers look like
Drawers have a fixed header and fixed footer. The header acts as a navigation tool. The footer houses the primary and secondary actions for the drawer.
Drawers sit on a raised elevation with a pure black scrim at 40% opacity. This allows them to overlay other content and drive focus to an action.
Drawer headers should be succinct, not exceeding one line of text. Include a close control (“X”) in headers in large and small drawers.
Drawer headers may include the back control when the drawer needs navigation. When we use the back control, the drawer title changes from left-aligned to center-aligned.
Drawer footers are sticky and anchored to the bottom of the screen. They contain most of the page-level primary, secondary, and tertiary actions. Typically, the primary action saves changes and closes the drawer. Secondary and tertiary buttons are optional for large and small drawers.
Footers for large drawers (576 px) can include:
- A primary action
- A primary action and tertiary action
- A primary action and secondary action
- A primary action, secondary action, and tertiary action
Footers for small drawers (384 px) cannot include a primary action, secondary action, and tertiary action. But they can include:
- A primary action
- A primary and secondary action
- A primary and tertiary action
Mobile web responsive appearance
Drawers behave the same way across devices. On phones, drawers cover 100% of the width and height of the device. On tablets, use drawers when users need to select from a large amount of data or see relevant data while staying in context. Mobile drawer headers should be succinct, not exceeding one line of text.
Include a close control (“X”) in mobile headers. When we use the back control, the drawer title changes from left-aligned to center-aligned.
Mobile drawer footers can include a primary, secondary, and tertiary action. Footer actions should be consistent between the desktop and mobile experience.
How drawers behave
To open the drawer, select a form field, table row, button, or another UI element. We don’t recommend a toggle button as a way to open drawers.
Large drawers use the full height of the page, covering any headers and footers present.
Small drawers open automatically when items in the drawer pertain to the current task. They push page content over and don’t cover any headers or footers.
To close the drawer, select the scrim, footer action, or dedicated close button.
Drawers slide back into the right and disappear completely when closed.
Users can scroll through drawer content vertically, independent of the parent page content and interface. Users can’t scroll through drawer content horizontally.
Drawer headers are fixed along the top. Content scrolls underneath, and a shadow is added to color-matched headers.
Drawer footers stick to the bottom with a fixed height. Content scrolls below the drawer with a 56 px gradient dissolve above.
Mobile web responsive behavior
Drawers behave the same way across devices. On phones, drawers cover 100% of the width and height of the device.
Align your content with the Intuit content design style guide, including the following:
- Use sentence case throughout. Only capitalize the first word and proper nouns.
- Use the Oxford comma. The Oxford comma precedes the conjunction in a list.
- Refrain from using all-caps, exclamation marks, and ampersands.
- Reference the word list for spelling and formatting conventions.
- Follow the appropriate QuickBooks’ voice and tone attributes for the overall experience.