The Sidesheet component is used to show more details about an object.
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.
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.
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
The SideSheet component can appearn on all side of the screens.
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.
Use the preventBodyScrolling prop to disable scrolling outside the side sheet.