Drawer

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

Import

import * as Drawer from '@base-ui/react/drawer';

Drawer.Root

Groups all parts of the drawer. Doesn’t render its own HTML element.

Props

Drawer.Trigger

The button that opens the drawer.

Drawer.Backdrop

An overlay displayed beneath the drawer popup.

Props

The drawer’s content.

Props

Drawer.Portal

Portals the drawer popup and backdrop to a different part of the DOM.

Props

Drawer.Close

A button that closes the drawer.

Drawer.Title

An accessible title that is announced when the drawer is opened.

Drawer.Description

An optional accessible description that is announced when the drawer is opened.

Components API

Utilities API

Drawer

Drawer

Import

Drawer.Root

Props

Drawer.Trigger

Drawer.Backdrop

Props

Props

Drawer.Portal

Props

Drawer.Close

Drawer.Title

Drawer.Description

​Drawer

​Import

​Drawer.Root

​Props

​Drawer.Trigger

​Drawer.Backdrop

​Props

​Drawer.Popup

​Props

​Drawer.Portal

​Props

​Drawer.Close

​Drawer.Title

​Drawer.Description

Drawer

Import

Drawer.Root

Props

Drawer.Trigger

Drawer.Backdrop

Props

Drawer.Popup

Props

Drawer.Portal

Props

Drawer.Close

Drawer.Title

Drawer.Description