Drawer

A floating layer that slides in from the edge of the screen.

Install

npm install @arco-design/web-react@2.66.18

Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.

Examples

Basic: Basic usage of Drawer. Click the trigger button to slide out the drawer from the right, click the mask area to close.
Customize popup position: Use placement to customize the position where the drawer will slide out from.
Custom node: The content can be customized through title and footer. When set to null, the corresponding dom node won't be rendered.
Form in drawer: Use form in drawer.
Nested drawer: Nested drawer.
Information preview drawer: Used for quick preview of the information. Click the mask area to close.
Popup Container: Use getPopupContainer to specify the parent node where the drawer should mount to.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

API

Drawer

Property	Description	Type	DefaultValue	Version
autoFocus	Whether to focus on the first focusable element by default. Only works when `focusLock` is turned on.	boolean	`true`	2.13.0
closable	Whether to show the close button on top-right of the drawer dialog	boolean	`true`	-
confirmLoading	Whether the OK button is in loading state	boolean	`-`	-
escToExit	Whether to enable pressing `ESC` to close the drawer.	boolean	`true`	2.10.0
focusLock	Whether to lock the focus in the drawer box.	boolean	`true`	2.13.0
mask	Whether to show mask	boolean	`true`	-
maskClosable	Whether to close the drawer when the mask is clicked	boolean	`true`	-
mountOnEnter	Whether to render the drawer component only when it is opened initially.	boolean	`true`	-
unmountOnExit	Whether to unmount component when hidden	boolean	`-`	-
visible	Visibility of the drawer	boolean	`-`	-
zIndex	Set the zIndex of the drawer	number	`-`	2.42.0
placement	The placement of the drawer: `top` `right` `bottom` `left`	'top' \| 'right' \| 'bottom' \| 'left'	`right`	-
cancelText	Text of the Cancel button	ReactNode	`-`	-
closeIcon	Custom the close button on top-right of the drawer dialog	ReactNode	`-`	2.49.0
footer	The footer element. Drawer will not render the footer element when `footer` is `null`	ReactNode	`-`	-
okText	Text of the OK button	ReactNode	`-`	-
title	The title element. Drawer will not render the title element when `title` is `null`	ReactNode	`-`	-
bodyStyle	The additional css style for content	CSSProperties	`-`	2.9.0
cancelButtonProps	The props of `cancel` button	ButtonProps	`-`	2.26.0
className	Additional css class	string \| string[]	`-`	-
headerStyle	The additional css style for header	CSSProperties	`-`	2.9.0
height	The height of the drawer dialog. Only works when `placement` is `top` or `bottom`	string \| number	`250`	-
maskStyle	Style of the drawer mask	CSSProperties	`-`	-
okButtonProps	The props of `ok` button	ButtonProps	`-`	2.26.0
style	Additional style	CSSProperties	`-`	-
width	The width of the drawer dialog. Only works when `placement` is `left` or `right`	string \| number	`250`	-
wrapClassName	The additional class name of the container of the drawer dialog	string \| string[]	`-`	-
afterClose	Callback when drawer is closed	() => void	`-`	-
afterOpen	Callback when drawer is opened	() => void	`-`	-
getChildrenPopupContainer	Set the mount node for popup such as `Select`, `Tooltip`, etc. Default to the drawer dialog.	(node: HTMLElement) => Element	`-`	-
getPopupContainer	Parent node which the drawer should be rendered to.	() => Element	`() => document.body`	-
onCancel	Callback when the Cancel button is clicked	(e: MouseEvent \| Event) => void	`-`	-
onOk	Callback when the OK button is clicked	(e: Event) => void	`-`	-