Drawer

Drawers slide content in from an edge — filters, settings, or auxiliary nav. OverlayDrawer (alias Drawer) teleports a modal panel with backdrop; InlineDrawer keeps the panel in your layout. Bind open with OpenBind; set position, size, and whether backdrop click or Escape dismisses.

Prefer composed scrims inside Dialog and Backdrop unless you need a standalone loading overlay. Bind open with OpenBind at the app root and pass signals down — share one open signal between trigger, backdrop dismiss, and footer buttons rather than relying on implicit internal-only state.

Filters, settings, or detail panels triggered from a page action
Modal overlay from an edge — OverlayDrawer / Drawer
Persistent in-layout panel — InlineDrawer

Bind open with OpenBind (typically RwSignal<bool>).
Choose OverlayDrawer for teleported modal panels or InlineDrawer for in-layout panels.
Set mask_closeable=false when backdrop clicks should not dismiss.
Compose DrawerHeader and DrawerBody; add DrawerHeaderTitleAction for header actions.

Default drawer (inline)

Inline drawer stays in the preview card; an overlay trigger exercises teleported panels for migration smoke tests.

Drawer body

Right overlay position

Modal panel that slides in from the right edge—the default drawer placement for detail panels, filters, and secondary workflows triggered by a button.

Left overlay position

Panel anchored to the left edge, suited for navigation rails or persistent secondary content that mirrors a sidebar pattern.

Top overlay position

Panel that drops from the top of the viewport—useful for banners, quick filters, or mobile-style sheets that occupy horizontal space.

Bottom overlay position

Panel that rises from the bottom edge, a common pattern for action sheets, pickers, and thumb-friendly mobile overlays.

Escape closes

Drawer that dismisses when the user presses Escape via close_on_esc=true. Enable this when keyboard users should be able to exit without clicking the backdrop.

Large size

Wider panel preset using size=DrawerSize::Large for forms, multi-column detail, or content that needs more room than the default small width.

Backdrop not dismissible

Drawer that ignores backdrop clicks via mask_closeable=false. Use when dismissal must happen through an explicit close action.

Header title action

Drawer header with a trailing action slot beside the title.

Drawer body