Drawer

Code

Install

Import

The axes

• placement: left, right (the default), top, bottom. Sets the edge the drawer comes from, and whether size is a width or a height. In a right-to-left layout, left and right swap.
• size: "default" (378px), "large" (736px), a number of pixels, or any CSS length such as "60%" or clamp(). It replaces the deprecated width and height.
• closable.placement: "start" or "end", the side of the header the close button sits on. It follows the text direction.

Flags

• open is always controlled. Pair it with onClose, which fires for the close button, a click on the mask and Escape, so one handler covers every way to close.
• mask (true) takes a boolean or { enabled, blur, closable }. Turning it off also turns off the focus trap, the page scroll lock and closing by clicking outside.
• keyboard (true) closes the top drawer on Escape. If you turn it off along with mask.closable, add a button that closes the drawer.
• destroyOnHidden unmounts the body on close, so a form inside starts empty next time. It replaces the deprecated destroyOnClose, which logs a warning.
• loading shows a skeleton in the body and keeps the header and footer.
• resizable lets the reader drag the inner edge. To keep the new size, store it from onResize and pass it back as size.
• push ({ distance: 180 }) is how far a drawer slides aside when a drawer nested in it opens. Set push={false} on the outer drawer to keep it in place.
• getContainer={false} renders the drawer inside its parent instead of over the page. The parent needs position: relative, and the drawer no longer traps focus or locks the page scroll.
• floating holds the panel sizeXS off the screen edges with rounded corners. The gap counts toward size.
• divided (true) draws the lines under the header and above the footer. false removes them and the body's top and bottom padding.
• flush removes the body's padding, so an image or a list reaches the panel's edges.
• small tightens the header, body and footer padding and steps the title and close glyph down one font size. The width still comes from size. With flush or divided={false}, those set the body padding.

Slots

• title is the header text and the drawer's accessible name.
• extra sits opposite the title, for a status or a small secondary action.
• footer stays below the body while the body scrolls, so the actions belong there.
• closeIcon is the icon inside the close button, set by the provider unless you pass one.
• children is the body. It scrolls on its own, with no height to set.

Events

• onClose fires when the reader asks to close the drawer.
• afterOpenChange(open) fires once the slide in or out has finished, a good moment to start or cancel a fetch.

Styling