Side sheet

A dialog.side-sheet (or .right / .left) is the surface, docked to the trailing edge by default. Use it for optional content and actions so the main view stays put. People can move to another region inside the sheet; a back icon is the affordance for that.

Tokens follow the M3 side sheet spec. The container is surface-container-low, 400dp wide, full height. A <header> is the 64dp top bar: optional back, a title-large headline, and a close control. A last-child <form method="dialog"> is the action row.

Two variants, same sheet:

• Standard — show(). No scrim; a 1dp divider on the inner edge. The page stays interactive. Intended next to the main pane on large windows.
• Modal — showModal(). A scrim sits beside the sheet and the page is inert. Inner corners are 28dp. Tap the scrim, drag the inner edge out, or use close.

Show standard Show modal Show with back

Headline

close

Optional details sit beside the page. Dismiss to get the full view back.

Headline

close

Secondary content. The scrim marks the main view as unavailable until this sheet closes.

Save Cancel

arrow_back

Headline

close

A back icon means this region is nested inside the sheet. The page author swaps the body; the icon is the HTML.

<dialog class="side-sheet" aria-labelledby="headline-title">
  <header>
    <h2 id="headline-title">Headline</h2>
    <form method="dialog">
      <button type="submit" aria-label="Close">
        <span class="material-symbols" aria-hidden="true">close</span>
      </button>
    </form>
  </header>
  <div>…</div>
</dialog>

There is no extra class for the modal variant — showModal() vs show() is the split. Add .left to dock to the start edge.

Header and back

The header is 64dp. 24dp from the start to the headline, 12dp between the headline and close, 24dp from the close icon to the trailing edge. Put a back button first when the sheet has more than one region — it does not close the sheet unless you wire it to.

<header>
  <button type="button" aria-label="Back">
    <span class="material-symbols" aria-hidden="true">arrow_back</span>
  </button>
  <h2>Headline</h2>
  <form method="dialog">
    <button type="submit" aria-label="Close">
      <span class="material-symbols" aria-hidden="true">close</span>
    </button>
  </form>
</header>

Layout

Standard sheets sit on large windows beside the main pane. Modal sheets are the compact/medium pattern (or any time the sheet should take focus). On small screens a bottom sheet is often a better fit.