Drawer

A triggerable drawer that overlaps whatever page it's on.

Was this example helpful?

Usage#

Code
import { Drawer } from "@medusajs/ui"

Code
1<Drawer>2  <Drawer.Trigger>Trigger</Drawer.Trigger>3  <Drawer.Content>4    <Drawer.Header>5      <Drawer.Title>Drawer Title</Drawer.Title>6    </Drawer.Header>7    <Drawer.Body>Body</Drawer.Body>8    <Drawer.Footer>Footer</Drawer.Footer>9  </Drawer.Content>10</Drawer>

API Reference#

Drawer

This component is based on the Radix UI Dialog primitives.

Drawer.Trigger

This component is used to create the trigger button that opens the drawer. It accepts props from the Radix UI Dialog Trigger component.

Drawer.Content

This component wraps the content of the drawer. It accepts props from the Radix UI Dialog Content component.

Prop	Type	Default
`overlayProps`	`ReactComponentPropsWithoutRef`	-
`portalProps`	`ReactComponentPropsWithoutRef`	-

Was this helpful?

Drawer.Header

This component is used to wrap the header content of the drawer. This component is based on the div element and supports all of its props.

Drawer.Title

This component adds an accessible title to the drawer. It accepts props from the Radix UI Dialog Title component.

Drawer.Body

This component is used to wrap the body content of the drawer. This component is based on the div element and supports all of its props

Drawer.Footer

This component is used to wrap the footer content of the drawer. This component is based on the div element and supports all of its props.