Skip to content
aidsgnaidsgnaidsgn

BottomSheet

aidsgn-bottom-sheet presents a compact modal choice or task at the bottom edge of the viewport. It stabilizes its top-layer dimensions before sliding into view and includes a handle for dragging it closed.

Share

Choose how to share this item.

<aidsgn-bottom-sheet id="share" heading="Share">
<dialog class="aidsgn-modal aidsgn-bottom-sheet" aria-labelledby="sheet-heading"><div class="aidsgn-modal__surface"><div class="aidsgn-bottom-sheet__drag-handle" aria-hidden="true"></div><header class="aidsgn-modal__header"><h2 class="aidsgn-modal__heading" id="sheet-heading">Share</h2><button class="aidsgn-modal__close" type="button" aria-label="Close share options">×</button></header><div class="aidsgn-modal__body"><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></div></div></dialog>
</aidsgn-bottom-sheet>

BottomSheet shares Dialog’s open, heading, close-label, show(), close(), aidsgn-close, and aidsgn-cancel API. Its dimensions remain stable while it opens and closes. It closes with its visible close control, backdrop, Escape, native dialog forms, or by dragging the handle downward. Gesture dismissal reports drag as the aidsgn-close reason.

Holding the authored close button applies shared Press feedback without changing its 44px target. Reduced motion suppresses the scale.

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.

Usage guidelines

Section titled “Usage guidelines”
A Bottom Sheet titled Share offers only Copy link and Send email actions.A Bottom Sheet titled Share offers only Copy link and Send email actions.
Do

Keep the task focused

Use BottomSheet for a concise action or supporting content that fits constrained screens.

A Bottom Sheet has the heading Sort results and a visible close button in its header.A Bottom Sheet has the heading Sort results and a visible close button in its header.
Do

Name and dismiss the sheet clearly

Provide a descriptive heading and an obvious dismissal path when the sheet is non-blocking.

A simulated cramped Bottom Sheet contains four numbered account-setup steps and several fields.A simulated cramped Bottom Sheet contains four numbered account-setup steps and several fields.
Don’t

Avoid long workflows

Move a multi-step task to a full page where its structure and progress have enough room.

A simulated Dialog is layered above a Bottom Sheet, creating two close controls and overlapping modal surfaces.A simulated Dialog is layered above a Bottom Sheet, creating two close controls and overlapping modal surfaces.
Don’t

Never stack modal surfaces

Open one modal surface at a time so focus, dismissal, and task context remain predictable.