Side Sheet

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.

1. Raised surface
2. Header container
3. Scrim (optional)
4. Backstack affordance — Quick action button (optional)
5. Heading — Small heading
6. Compact button — Caption (optional)
7. Close affordance — Quick action button (optional)
8. 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 sheet navigation to aid in multi-step flows contained within the side sheet.

1. Raised surface
2. Step indicator — Quick action button (avatar) (optional)
3. Drawer open/close affordance — Quick action button
4. 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

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.