BottomSheet

aidsgn-bottom-sheet presents a compact modal choice or task at the bottom edge of the viewport without depending on touch gestures.

Open BottomSheet

Choose how to share this item.

Copy link

Send email

<aidsgn-bottom-sheet id="share" heading="Share">
  <p>Choose how to share this item.</p>
  <form method="dialog" data-aidsgn-modal-actions>
    <button value="copy">Copy link</button>
    <button value="email">Send email</button>
  </form>
</aidsgn-bottom-sheet>
<script>document.querySelector("#share").show()</script>

BottomSheet shares Dialog’s open, heading, close-label, show(), close(), aidsgn-close, and aidsgn-cancel API. It closes with its visible close control, backdrop, Escape, or native dialog forms; swipe-to-dismiss is intentionally unsupported.

The sheet spans the viewport width and is limited to 40rem or 90dvh, whichever is smaller. Override that bound with --aidsgn-bottom-sheet-max-block-size. Keep tasks short and verify keyboard use even when the primary context is touch.