SideSheet

MD3 side sheet: a panel up to 400dp wide anchored to the trailing (or leading) edge, with a headline, optional back / close buttons, and a bottom action bar. standard sheets sit beside the content; modal sheets overlay it with a scrim.

Standard

A standard sheet is a non-modal complementary panel: the rest of the page stays interactive. open defaults to true; toggle it to show and hide the sheet.

Details

• Overview
• Activity
• Settings

<SideSheet
  open={open}
  onClose={() => setOpen(false)}
  headline="Details"
  actions={<Button variant="filled">Save</Button>}
>
  …
</SideSheet>

Modal

A modal sheet overlays the page with a 0.32 scrim; scrim click, Escape and the close button dismiss it. anchor="left" opens it from the leading edge, and showBackButton adds a leading back button (onBack).

Filters

---

• Overview
• Activity
• Settings

Navigation

• Overview
• Activity
• Settings

<SideSheet
  variant="modal"
  anchor="left"
  open={open}
  onClose={() => setOpen(false)}
  headline="Navigation"
  showBackButton
  onBack={goBack}
>
  …
</SideSheet>

Accessibility

• A modal sheet is a role="dialog" with aria-modal, named by its headline (or your aria-label / aria-labelledby). Focus is trapped inside, the rest of the page is inert, body scroll is locked, and focus returns to the opener on close.
• A standard sheet is a complementary landmark named by its headline; it does not trap focus.
• The close and back buttons are icon buttons labelled "Close" and "Back"; localize them with closeLabel / backLabel.

Props

Prop	Type	Default	Description
actions	ReactNode	—	Bottom action bar content (left-aligned buttons).
anchor	enum	right	Edge the sheet is anchored to.
backLabel	string	Back	Accessible label for the back button.
closeLabel	string	Close	Accessible label for the close button.
headline	ReactNode	—	Title shown in the header.
onBack	(() => void)	—	Called when the back button is clicked.
onClose	(() => void)	—	Called on close-button click, scrim click, or Escape.
open	boolean	true	Whether the sheet is shown.
showBackButton	boolean	false	Show a leading back button (modal).
showCloseButton	boolean	true	Show the trailing close button.
showDivider	boolean	false	Show a divider between the header and content.
variant	enum	standard	Standard (inline) or modal (overlay + scrim).