Side sheets are used to present a great amount of information as a part of users' primary task while maintaining the context with the background content.
Side sheets are significantly larger than the Modals and hence they can accommodate complex informations and interactions. This way a side sheet works as a sub page in itself while maintaining the context.
Basis on the sizes and the amount of content they can accommodate, side sheets are of 2 types -
The default side sheet takes 6 columns in the grid and starts at just about halfway of the width of the screen.
The large side sheet takes 10 columns in the grid and starts from left side of the screen.
(top, right, bottom)
|0px, 0px, 0px|
The default side sheet covers most of the use cases but for the cases when the content is quite complex and needs a wider area, use the large variant.Default vs Large side sheet
The action buttons appear in the left side of the sheet and follows the reverse order as the modals to keep the position of primary action predictable. Also,
Just like the modals, the dividers in the header and the footer should ONLY be shown when the content is scrollable.
Clicking outside the sheet should NOT cancel the current process and close it by default.
Unlike modals, side sheets can have multi steps workflow. Instead of showing multiple sheets, the entire workflow happens within the scope of a single side sheet. A user can navigate through the back stack using the Back button at the top left.