Drawer

A panel that slides out from the edge of the screen.

Importimport { Drawer } from "antd";

Docs

When To Use

A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since the user can interact with the Drawer without leaving the current page, tasks can be achieved more efficiently within the same context.

Use a Form to create or edit a set of information.
Processing subtasks. When subtasks are too heavy for a Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.
When the same Form is needed in multiple places.

Notes for developers
Since the 5.17.0, we provided the loading prop by the Spin. However, since the 5.18.0 version, we have fixed this design error and replaced the Spin with the Skeleton, and also modified the type of loading prop, which can only accept boolean type.

Examples

Basic

Basic drawer.

Set the loading status of Drawer.

5.17.0

Render in this

Render in current dom

Render in current dom. custom container, check getContainer.

Note: style and className props are moved to Drawer panel in v5 which is aligned with Modal component. Original style and className props are replaced by rootStyle and rootClassName.

When getContainer returns a DOM node, you need to manually set rootStyle to { position: 'absolute' }, see #41951.

Lily
Progresser XTech
- View Profile
Lily
Progresser XTech
- View Profile

Preview drawer

Use Drawer to quickly preview details of an object, such as those in a list.

Preset size

The default width (or height) of Drawer is 378px, and there is a preset large size 736px.

toprightbottomleft

Custom Placement

The Drawer can appear from any edge of the screen.

toprightbottomleft

Extra Actions

Extra actions should be placed at corner of drawer in Ant Design, you can use extra prop for that.

Submit form in drawer

Use a form in Drawer with a submit button.

Multi-level drawer

Open a new drawer on top of an existing drawer to handle multi branch tasks.

Customize className for build-in module

Set the className of the build-in module (header, body, footer, mask, wrapper) of the drawer through the classNames.

API

Common props ref：Common props

Note

v5 uses rootClassName & rootStyle to configure the outermost element style, instead of className & style from v4. This is done to align the API with Modal.

Props	Description	Type	Default	Version
autoFocus	Whether Drawer should get focused after open	boolean	true	4.17.0
afterOpenChange	Callback after the animation ends when switching drawers	function(open)	-
className	Config Drawer Panel className. Use `rootClassName` if want to config top DOM style	string	-
classNames	Semantic structure className	Record<SemanticDOM, string>	-	5.10.0
closeIcon	Custom close icon. 5.7.0: close button will be hidden when setting to `null` or `false`	ReactNode	<CloseOutlined />
~~destroyOnClose~~	Whether to unmount child components on closing drawer or not	boolean	false
destroyOnHidden	Whether to unmount child components on closing drawer or not	boolean	false	5.25.0
extra	Extra actions area at corner	ReactNode	-	4.17.0
footer	The footer for Drawer	ReactNode	-
forceRender	Pre-render Drawer component forcibly	boolean	false
getContainer	mounted node and display window for Drawer	HTMLElement \| () => HTMLElement \| Selectors \| false	body
headerStyle	Style of the drawer header part	CSSProperties	-
height	Placement is `top` or `bottom`, height of the Drawer dialog	string \| number	378
keyboard	Whether support press esc to close	boolean	true
mask	Whether to show mask or not	boolean	true
maskClosable	Clicking on the mask (area outside the Drawer) to close the Drawer or not	boolean	true
placement	The placement of the Drawer	`top` \| `right` \| `bottom` \| `left`	`right`
push	Nested drawers push behavior	boolean \| { distance: string \| number }	{ distance: 180 }	4.5.0+
rootStyle	Style of wrapper element which contains mask compare to `style`	CSSProperties	-
style	Style of Drawer panel. Use `styles.body` if want to config body only	CSSProperties	-
styles	Semantic structure style	Record<SemanticDOM, CSSProperties>	-	5.10.0
size	preset size of drawer, default `378px` and large `736px`	'default' \| 'large'	'default'	4.17.0
title	The title for Drawer	ReactNode	-
loading	Show the Skeleton	boolean	false	5.17.0
open	Whether the Drawer dialog is visible or not	boolean	false
width	Width of the Drawer dialog	string \| number	378
zIndex	The `z-index` of the Drawer	number	1000
onClose	Specify a callback that will be called when a user clicks mask, close button or Cancel button	function(e)	-
drawerRender	Custom drawer content render	(node: ReactNode) => ReactNode	-	5.18.0

Semantic DOM

mask
5.13.0
Mask element
content
5.13.0
Drawer container element
header
5.13.0
Header element
body
5.13.0
Body element
footer
5.13.0
Footer element

Design Token

Component TokenHow to use?

Token Name	Description	Type	Default Value
footerPaddingBlock	Vertical padding of footer	number	8
footerPaddingInline	Horizontal padding of footer	number	16
zIndexPopup	z-index of drawer	number	1000

Global TokenHow to use?

contributors

Drawer

When To Use

Examples

Lily

Lily

API

Semantic DOM

mask

content

header

body

footer

Design Token