SideSheet component is a panel overlaying the screen on the right side.
It is used to show more details about a certain object or person.
SideSheet is often triggered by clicking a row in a table.
- Showing a profile view of a user
- Showing detailed information about a transaction (such as a sync or run)
- Showing configuration settings that don‘t need to be accessible by a URL
When not to use a side sheet
Side Sheets are a great way to cheat creating a new page.
As a general rule of thumb, a
SideSheet should not be used as a replacement
of a new page when the page needs to be accessible by a URL.
Avoid showing a
SideSheet based on a URL.
SideSheet component does not have any opinion about the contents of the
In the examples below are some recipes to make sure usage of the
SideSheet is consistent.
It is recommended to compose more opinionated Side Sheets in the consuming application.
Side sheets close on
- Backdrop click
- Close icon button click
- Escape key
- The close function being called
When opening the
SideSheet, focus will be brought inside the
SideSheet by looking for elements with
[tabindex] second and
When closing the
SideSheet, focus will be brought back to the element that was focused before opening the
This is normally the button that triggered the
SideSheet component can appearn on all side of the screens.
Full featured example
Full featured example with a header with a title, subtitle and a tab bar. Content is a simple card.
Example with a header with a title. Content is a simple card.
Title and subtitle
Example with a header with a title and title. Content is a simple card.
Preserve scroll position and prevent body scrolling
preventBodyScrolling prop to disable scrolling outside the side sheet.
childrennode | funcrequired
widthstring | number
positionPosition.TOP | Position.BOTTOM | Position.LEFT | Position.RIGHT