Overlays
Drawer
A side-anchored panel for filters, navigation, or inline editing. Slides in from either edge, dims the page behind it, and closes on backdrop click, the close button, or Esc.
Right side
Left side, with footer
A drawer holding a form passes no size. It counts the fields in its body and takes
the rung that fits, and it grows if the form reveals more fields while it is open.
API
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Bindable open state. |
side | 'left' | 'right' | 'right' | Which edge the drawer is anchored to. |
size | 'sm' | 'md' | 'lg' | 'xl' | 'auto' | 'auto' | A rung of the overlay ladder (448, 576, 704, 896px), or auto to take the one the body needs: md up to four fields, lg past four and xl past eight. Leave it unset for a form. |
title | string | no default | Title rendered in the header. |
description | string | no default | Subdued sub-text below the title. |
onclose | () => void | no default | Fires after the drawer closes. |
children required | Snippet | no default | Drawer body. It scrolls when it overflows. |
footer | Snippet | no default | Pinned footer rendered with a divider above. |