A little room to finish the task.

Edit a workspace beside the page, or complete a short export from the bottom. Both patterns protect focus until the task is closed.

Settings and exports

Choose the shape around the task

Sheet attaches to one of four physical viewport edges. Left and right sheets fill the screen height; top and bottom sheets fill its width. Drawer fits its content at the bottom, centered on wider screens and capped at 85% of the viewport height.

Keep the actions within reach

Header, Body, and Footer can sit directly inside Content or one direct form. The body scrolls independently; title and actions stay visible. Mobile safe-area padding keeps actions away from device edges. Use concise titles and descriptions, especially in landscape.

One modal contract

Both reuse Dialog: a modal top layer, keyboard focus containment, Escape, return focus, and scroll locks that survive nested tasks. Controlled state belongs to your application. Use an explicit close action. Drawer does not implement swipe dismissal or snap points.

Keyboard and naming follow the W3C modal dialog pattern. Use Popover when the surrounding page should remain interactive.