Side Sheet
A side sheet is used to overlay content on top of the user interface for the purpose of focusing the user’s attention on specific information or to accomplish a specific task. As a general rule, side sheets should provide contextually-relevant content to the parent view underneath. This component is designed only for the responsive web medium to large experiences. See this doc for the breakpoints. Anything that is considered “Mobile” will display a bottom sheet while “Tablet” and “Desktop” display the side sheet.

Anatomy
The side sheet component is made up of a raised surface that contains content and affordances to close the side sheet. All other elements are optional. Side sheets come in two variants: simple and verbose.
Simple side sheet
Simple side sheets are raised above the surface and completely cover the context underneath. The "simple" aspect indicates the lack of an attached drawer.

- Raised surface
- Header container
- Scrim (optional)
- Backstack affordance — Quick action button (optional)
- Heading — Small heading
- Compact button — Caption (optional)
- Close affordance — Quick action button (optional)
- Content (just for reference)
Verbose side sheet
Verbose side sheets can include all the same elements of a simple side sheet, but also include a drawer to aid in multi-step flows contained within the side sheet.

- Raised surface
- Step indicator — Quick action button (avatar) (optional)
- Drawer open/close affordance — Quick action button
- Step indicator label — Quick action button (Caption) (optional)
Header
Side sheet headers can provide several controls depending on how the user might need to interact with side sheet content. Compact button provides a great way to surface controls related to the entire side sheet. A few examples are clearing out all form fields, or removing all filters. The backstack affordance serves as a way to step backward in a multi-step flow within a bottom sheet — similar to the mobile backstack paradigm.
When to use
Side sheets are useful for a wide variety of use-cases and can contain one or more atoms on their surface, and can be triggered as a result of user interaction or by system request. Some examples of side sheet usage:
- Providing quick access to contextual controls
- Surfacing contextual interaction options
- Surfacing interstitial content with medium emphasis
- Revealing large quantities of categories or options that would otherwise clutter the parent experience underneath
Side sheet drawers could be used for:
- Multistep processes that require quick navigation to move forward and backwards within a multistep process
- Display the success or failure of individual steps within a multistep process
When not to use
Side sheets should not be used when:
- The content makes more sense existing within the current view
- The interaction is initiated by a card component (in which case the card should grow to show additional content instead of triggering a side sheet)
- There is no contextually useful information or interactions displayed
Side sheet drawers should not be used:
- When simpler UI controls could accomplish the same goal
- To link to other features on the platform that are out of context of the side sheet
States
Header content
The image below is just for an example, but the actual states are defined on the nested components’ level (Quick Action Button, and Compact Button in this example).

Drawer


Placement
Side sheets should always be anchored to the right side of the viewport, and are either open fully or closed fully. The drawer available in the verbose side sheet can be expanded or collapsed independent from the parent side sheet container.
Developer Docs
Vue Developer DocsComponent documentation coming soon!