Drawer

Drawer is a modal that is triggered by user action and provides information and actions contextual to the page and their workflow.

Overview

A drawer is triggered by a user’s action to provide additional/optional contextual information or supplemental controls. It supports, rather than interrupts, the user’s workflow. But, users should only be expected to interact with the drawer content or the primary content area at a time.

Anatomy

null
  1. Header: Contains a title that describes the intention of the drawer and an affordance to dismiss the drawer. Required but can be visually hidden.
  2. Content: Contains custom content, including text, imagery, or other components.
  3. Footer: Contains optional actions.
  4. Dividers (optional): Lines to separate content from the header and footer; only present with scrolling content.

Demo

Storybook failed to load. Please connect to the VPN to access.

Open the component in Figma.

When to use

Use a drawer in the following scenarios:

  • When you need to present supplemental/non-critical content.
  • When you need to not block users from completing their task.
  • When the existing page content is too dense to allow for further condensation.
  • When the interactions/information enclosed within the drawer itself is not reliant cross-referencing with the content from the existing page.
  • When the experience is the drawer is complex enough to warrant its own focus and context.

When not to use

Don’t use a drawer in the following scenarios:

  • When you need to display system messages.
  • When you need to notify the user of something.
  • When a user action is required. Including:
  • When you need to ask a user to confirm an action they want to take.
  • When you need to share important information that a user needs to acknowledge.
  • When you need to tell a user that if they proceed with an action they’ve initiated, it may impact their data in a negative way.
  • When you need to communicate critical information about an issue that a user needs to resolve before they can continue with a task.

Similar components

Variants

Overlay

The overlay variant sits on top of page content — so it obscures the page content under it when it’s open. The page content can’t be interacted with.

null

The variant has options to include up to three actions.

 

Three button

Use a primary button and a secondary button to give users options to decide between. And, include a rare tertiary button to provide an explicit close affordance. The buttons are right-aligned, with the primary action always the furthest to the right.

null

Two button

Use a primary button and a secondary button to give users options to decide between. The buttons are right-aligned, with the primary action always the furthest to the right.

null

One button

Use one secondary button to let users explicitly acknowledge something. For example, an action or event was successfully completed. For example, Done. The button is right-aligned.

null

Close affordance only

Use only the close affordance to let users read the drawer's content and then continue with their tasks. Use this variant only if no other actions are necessary.

null

When to use this variant.

  • To inform or guide user through an important flow.
  • For long-form workflows.
  • To edit a short list of permissions.
  • To add, view, or edit entitlements or permissions.
  • To upload a file.
  • To add an app.
  • To choose sort order.
  • To view a profile in the context of a table or list.

 

When using floating buttons, check alignment carefully: their left and right padding can cause them to appear indented from surrounding text.

 

null

Persistent

The persistent variant appears on the same level as page content — so it doesn’t block/obscure the page content under it when it’s open. The page content can be interacted with.

null

When to use this variant.

  • To assist, not inform
  • To show related or supplement content, like a profile, log history, campaign summary details, or lists of read-only permissions.
  • For supplemental workflows, like filtering.
  • When there's a potential need for information to be cross-referenced.
  • When page content can be reasonably scaled.
  • To include complementary content, like a preview of a user’s role.
  • To provide information not captured on the surface of a table cell. A drawer triggered by a button in a table.

 

null

Behaviors

Placement

Placement is done automatically. A drawer is always right-aligned for LTR layouts. The width is fixed and the height typically spans the height of the screen.

  • Overlay variant: The variant is on top of all other page content on the page, including the header bar.
  • Persistent variant: The variant’s spacing should be consistent between containers on the page. The drawer will be placed to the right of the main container using a Spacing 5 token.

Arrival

A drawer is closed by default and remains closed until a user action opens it on the right side of a page. Only one drawer can be open at a time and it remains open until closed by the user.

Work with your eng partners if you need a drawer that is open programmatically by default. For example, if you want a drill down view with a persistent drawer showing a profile or similar details.

Dismissal

A drawer can always be dismissed, with any of the following actions:

  • Clicking the close icon button (X) in the header
  • Clicking a Cancel button in the footer
  • Pressing the esc key on the keyboard.
  • The overlay variant also allows clicking in the overlay outside of the drawer.

A close affordance provides a consistent method for dismissing a drawer. It increases accessibility by making focused drawers easier to close.

Depending on your experience, you can choose to have dismissal undo any applied changes and return the user to the previous page.

Autofocus

Focus is placed on the first item a user can select. Focus is limited to the scope of the drawer while the drawer is open.

null

Overflow

When the content of a drawer is longer than its height, the content area will scroll vertically while the header and the footer remain fixed. This is independent of the rest of the UI, allowing user’s scroll position and content to persist while the page is scrolled, and vice versa.

Drawers can’t scroll horizontally.

null

 

 

Internationalization

​​RTL

For right-to-left (RTL) languages, the layout of the drawer is mirrored. A drawer is always left aligned. The close affordance and title will swap position, and the order of primary actions will swap and they will become left aligned.

null

Accessibility

Odyssey components are designed and built to meet accessibility requirements out of the box. So, designers and engineers can focus on any accessibility concerns unique to their problem areas.

Our components meet WCAG 2.2 AA criteria and WAI-ARIA guidelines to provide a usable and accessible experience to everyone.

Content guidelines

Title

  • Clearly describes the information or actions in the drawer. For example, More filters
  • Written in sentence case (capitalize the first word and proper nouns only).
  • Don’t use punctuation at the end of the title.
  • Required, but can be visually hidden if needed.

Content

  • Can display a wide variety of content and layouts. Generally, follow content guidelines appropriate to your content needs.
  • If the body copy is longer than the height of the dialog, it will automatically scroll.

Can contain optional action buttons.

Primary button text

  • Explain what the button will do with a verb + noun to describe the result.
  • Use the same verb as the title if possible.

Secondary text button label

  • Provide an option to go back or cancel the action.
  • Default label: Cancel

Content accessibility

The ARIA label should match the title text.

Figma: Drawer