Overlays

Drag Dismiss Bottom Drawer

A panel that slides in from an edge with a small drag handle, tracks a finger or pointer drag with rubber-band resistance, and either snaps back open or dismisses depending on how far it is pulled.

Order A-4821

Not yet shipped

Selected shipping

Standard

5-7 business days · Free

Drag the handle down, or press Escape.

Using Drag Dismiss Bottom Drawer

A panel that slides in from an edge with a small drag handle, tracks a finger or pointer drag with rubber-band resistance, and either snaps back open or dismisses depending on how far it is pulled.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: edge, showHandle, accentColor

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

2271Bottom sheet panelOverlaysA mobile-style sheet that rises from the bottom edge with a grabber handle and can be dragged back down to dismiss.

1953Edge slide sheetOverlaysA panel that slides in from a screen edge to hold supplementary content like a cart or filters, without leaving the current page.

1540Sheet drawerOverlaysA slide-over panel that springs in from one edge over a dimmed backdrop, holds focus inside, and closes on Escape, the close button, or a pull on its header.

2441Staggered Offer DrawerOverlaysA bottom drawer promoting a limited offer, where the heading, price and buttons spring in one after another instead of all appearing at once.

2295Account Dropdown MenuOverlaysAn avatar trigger that opens a grouped account menu with keyboard shortcut hints, a theme submenu, and a destructive sign-out row styled apart from the rest.

2296Account Menu FlyoutOverlaysA profile summary button that opens into an account menu of labeled rows, with a small curved indicator line that straightens when the menu is open.