Drawer

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

import { Drawer } from '@base-ui/react/drawer';
import styles from './index.module.css';

export default function ExampleDrawer() {
  return (
    <Drawer.Root swipeDirection="right">
      <Drawer.Trigger className={styles.Button}>Open drawer</Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Backdrop className={styles.Backdrop} />
        <Drawer.Viewport className={styles.Viewport}>
          <Drawer.Popup className={styles.Popup}>
            <Drawer.Content className={styles.Content}>
              <Drawer.Title className={styles.Title}>Drawer</Drawer.Title>
              <Drawer.Description className={styles.Description}>
                This is a drawer that slides in from the side. You can swipe to dismiss it.
              </Drawer.Description>
              <div className={styles.Actions}>
                <Drawer.Close className={styles.Button}>Close</Drawer.Close>
              </div>
            </Drawer.Content>
          </Drawer.Popup>
        </Drawer.Viewport>
      </Drawer.Portal>
    </Drawer.Root>
  );
}

Usage guidelines

Drawer extends Dialog: It adds gesture support, snap points, and indent effects. If you don’t need these, use Dialog instead. A panel that slides in from the edge of the screen and doesn’t need gesture support is a positioned Dialog.

Anatomy

Import the component and assemble its parts:

Anatomy

import { Drawer } from '@base-ui/react/drawer';

<Drawer.Provider>
  <Drawer.IndentBackground />
  <Drawer.Indent>
    <Drawer.Root>
      <Drawer.Trigger />
      <Drawer.SwipeArea />
      <Drawer.Portal>
        <Drawer.Backdrop />
        <Drawer.Viewport>
          <Drawer.Popup>
            <Drawer.Content>
              <Drawer.Title />
              <Drawer.Description />
              <Drawer.Close />
            </Drawer.Content>
          </Drawer.Popup>
        </Drawer.Viewport>
      </Drawer.Portal>
    </Drawer.Root>
  </Drawer.Indent>
</Drawer.Provider>

Drawer supports swipe gestures to dismiss. Set swipeDirection to control which direction dismisses the drawer. <Drawer.Content> allows text selection of its children without swipe interference when using a mouse pointer. Add data-base-ui-swipe-ignore to a descendant when you need to opt that element out of swipe dismissal for all input types.

Examples

State

By default, Drawer is an uncontrolled component that manages its own state.

Uncontrolled drawer

<Drawer.Root>
  <Drawer.Trigger>Open</Drawer.Trigger>
  <Drawer.Portal>
    <Drawer.Viewport>
      <Drawer.Popup>
        <Drawer.Content>
          <Drawer.Title>Example drawer</Drawer.Title>
          <Drawer.Close>Close</Drawer.Close>
        </Drawer.Content>
      </Drawer.Popup>
    </Drawer.Viewport>
  </Drawer.Portal>
</Drawer.Root>

Use open and onOpenChange props if you need to access or control the state of the drawer.

Controlled drawer

const [open, setOpen] = React.useState(false);
return (
  <Drawer.Root open={open} onOpenChange={setOpen}>
    <Drawer.Trigger>Open</Drawer.Trigger>
    <Drawer.Portal>
      <Drawer.Viewport>
        <Drawer.Popup>
          <Drawer.Content>
            <Drawer.Title>Example drawer</Drawer.Title>
            <Drawer.Close>Close</Drawer.Close>
          </Drawer.Content>
        </Drawer.Popup>
      </Drawer.Viewport>
    </Drawer.Portal>
  </Drawer.Root>
);

Position

Positioning is handled by your styles. swipeDirection defaults to "down" for bottom sheets. Use "up", "left", or "right" for other drawer positions.

Swipe directions

<Drawer.Root swipeDirection="right">

index.tsx index.module.css theme.css

import { Drawer } from '@base-ui/react/drawer';
import styles from './index.module.css';

export default function ExampleDrawer() {
  return (
    <Drawer.Root>
      <Drawer.Trigger className={styles.Button}>Open bottom drawer</Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Backdrop className={styles.Backdrop} />
        <Drawer.Viewport className={styles.Viewport}>
          <Drawer.Popup className={styles.Popup}>
            <div className={styles.Handle} />
            <Drawer.Content className={styles.Content}>
              <Drawer.Title className={styles.Title}>Notifications</Drawer.Title>
              <Drawer.Description className={styles.Description}>
                You are all caught up. Good job!
              </Drawer.Description>
              <div className={styles.Actions}>
                <Drawer.Close className={styles.Button}>Close</Drawer.Close>
              </div>
            </Drawer.Content>
          </Drawer.Popup>
        </Drawer.Viewport>
      </Drawer.Portal>
    </Drawer.Root>
  );
}

Nested drawers

Use the [data-nested-drawer-open] selector and the --nested-drawers CSS variable to style drawers when a nested drawer is open.

This demo stacks nested drawers using a constant peek so the frontmost drawer stays anchored to the bottom while the ones behind it are scaled down and lifted. It also uses the --drawer-height and --drawer-frontmost-height CSS variables to handle varying drawer heights.

Snap points

Use snapPoints to snap a bottom sheet drawer to preset heights. Numbers between 0 and 1 represent fractions of the viewport height, and numbers greater than 1 are treated as pixel values. String values support px and rem units (for example, '148px' or '30rem').

Snap points

const snapPoints = ['148px', 1];
const [snapPoint, setSnapPoint] = React.useState<Drawer.Root.SnapPoint | null>(snapPoints[0]);

<Drawer.Root snapPoints={snapPoints} snapPoint={snapPoint} onSnapPointChange={setSnapPoint}>
  {/* ... */}
</Drawer.Root>

Apply the snap point offset in your styles when using vertical drawers:

Snap point offset

.DrawerPopup {
  transform: translateY(calc(var(--drawer-snap-point-offset) + var(--drawer-swipe-movement-y)));
}

index.tsx index.module.css theme.css

'use client';
import * as React from 'react';
import { Drawer } from '@base-ui/react/drawer';
import styles from './index.module.css';

const TOP_MARGIN_REM = 1;
const VISIBLE_SNAP_POINTS_REM = [30];

function toViewportSnapPoint(heightRem: number) {
  return `${heightRem + TOP_MARGIN_REM}rem`;
}

const snapPoints = [...VISIBLE_SNAP_POINTS_REM.map(toViewportSnapPoint), 1];

export default function ExampleDrawerSnapPoints() {
  return (
    <Drawer.Root snapPoints={snapPoints}>
      <Drawer.Trigger className={styles.Button}>Open snap drawer</Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Backdrop className={styles.Backdrop} />
        <Drawer.Viewport className={styles.Viewport}>
          <Drawer.Popup
            className={styles.Popup}
            style={{ '--top-margin': `${TOP_MARGIN_REM}rem` } as React.CSSProperties}
          >
            <div className={styles.DragArea}>
              <div className={styles.Handle} />
              <Drawer.Title className={styles.Title}>Snap points</Drawer.Title>
            </div>
            <Drawer.Content className={styles.Scroll}>
              <div className={styles.Content}>
                <Drawer.Description className={styles.Description}>
                  Drag the sheet to snap between a compact peek and a near full-height view.
                </Drawer.Description>
                <div className={styles.Cards} aria-hidden>
                  {Array.from({ length: 20 }, (_, index) => (
                    <div className={styles.Card} key={index} />
                  ))}
                </div>
                <div className={styles.Actions}>
                  <Drawer.Close className={styles.Button}>Close</Drawer.Close>
                </div>
              </div>
            </Drawer.Content>
          </Drawer.Popup>
        </Drawer.Viewport>
      </Drawer.Portal>
    </Drawer.Root>
  );
}

By default, the drawer can skip snap points when swiping quickly. Specify the snapToSequentialPoints prop to disable velocity-based skipping so the snap target is determined by drag distance (you can still drag past multiple points).

Indent effect

Scale the background down when any drawer opens by wrapping your app in <Drawer.Provider> and use <Drawer.IndentBackground> + <Drawer.Indent> at the top of your tree. Any <Drawer.Root> within the provider notifies it when it mounts, which activates the indent parts (they receive [data-active] state attributes).

index.tsx index.module.css theme.css

'use client';
import * as React from 'react';
import { Drawer } from '@base-ui/react/drawer';
import styles from './index.module.css';

export default function ExampleDrawer() {
  const [portalContainer, setPortalContainer] = React.useState<HTMLDivElement | null>(null);

  return (
    <Drawer.Provider>
      <div className={styles.Root} ref={setPortalContainer}>
        <Drawer.IndentBackground className={styles.IndentBackground} />
        <Drawer.Indent className={styles.Indent}>
          <div className={styles.Center}>
            <Drawer.Root modal={false}>
              <Drawer.Trigger className={styles.Button}>Open drawer</Drawer.Trigger>
              <Drawer.Portal container={portalContainer}>
                <Drawer.Backdrop className={styles.Backdrop} />
                <Drawer.Viewport className={styles.Viewport}>
                  <Drawer.Popup className={styles.Popup}>
                    <div className={styles.Handle} />
                    <Drawer.Content className={styles.Content}>
                      <Drawer.Title className={styles.Title}>Notifications</Drawer.Title>
                      <Drawer.Description className={styles.Description}>
                        You are all caught up. Good job!
                      </Drawer.Description>
                      <div className={styles.Actions}>
                        <Drawer.Close className={styles.Button}>Close</Drawer.Close>
                      </div>
                    </Drawer.Content>
                  </Drawer.Popup>
                </Drawer.Viewport>
              </Drawer.Portal>
            </Drawer.Root>
          </div>
        </Drawer.Indent>
      </div>
    </Drawer.Provider>
  );
}

Set modal={false} to opt out of focus trapping and disablePointerDismissal to keep the drawer open on outside clicks.

index.tsx index.module.css theme.css

import { Drawer } from '@base-ui/react/drawer';
import styles from './index.module.css';

export default function ExampleDrawer() {
  return (
    <Drawer.Root swipeDirection="right" modal={false} disablePointerDismissal>
      <Drawer.Trigger className={styles.Button}>Open non-modal drawer</Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Viewport className={styles.Viewport}>
          <Drawer.Popup className={styles.Popup}>
            <Drawer.Content className={styles.Content}>
              <Drawer.Title className={styles.Title}>Non-modal drawer</Drawer.Title>
              <Drawer.Description className={styles.Description}>
                This drawer does not trap focus and ignores outside clicks. Use the close button or
                swipe to dismiss it.
              </Drawer.Description>
              <div className={styles.Actions}>
                <Drawer.Close className={styles.Button}>Close</Drawer.Close>
              </div>
            </Drawer.Content>
          </Drawer.Popup>
        </Drawer.Viewport>
      </Drawer.Portal>
    </Drawer.Root>
  );
}

You can build a full-screen mobile navigation sheet using Drawer parts, including a flick-to-dismiss from the top gesture.

index.tsx index.module.css theme.css

'use client';
import * as React from 'react';
import { Drawer } from '@base-ui/react/drawer';
import { ScrollArea } from '@base-ui/react/scroll-area';
import styles from './index.module.css';

const ITEMS = [
  { href: '/react/overview', label: 'Overview' },
  { href: '/react/components', label: 'Components' },
  { href: '/react/utils', label: 'Utilities' },
  { href: '/react/overview/releases', label: 'Releases' },
] as const;

const LONG_LIST = [
  { href: '/react/components/accordion', label: 'Accordion' },
  { href: '/react/components/alert-dialog', label: 'Alert Dialog' },
  { href: '/react/components/autocomplete', label: 'Autocomplete' },
  { href: '/react/components/avatar', label: 'Avatar' },
  { href: '/react/components/button', label: 'Button' },
  { href: '/react/components/checkbox', label: 'Checkbox' },
  { href: '/react/components/checkbox-group', label: 'Checkbox Group' },
  { href: '/react/components/collapsible', label: 'Collapsible' },
  { href: '/react/components/combobox', label: 'Combobox' },
  { href: '/react/components/context-menu', label: 'Context Menu' },
  { href: '/react/components/dialog', label: 'Dialog' },
  { href: '/react/components/drawer', label: 'Drawer' },
  { href: '/react/components/field', label: 'Field' },
  { href: '/react/components/fieldset', label: 'Fieldset' },
  { href: '/react/components/form', label: 'Form' },
  { href: '/react/components/input', label: 'Input' },
  { href: '/react/components/menu', label: 'Menu' },
  { href: '/react/components/menubar', label: 'Menubar' },
  { href: '/react/components/meter', label: 'Meter' },
  { href: '/react/components/navigation-menu', label: 'Navigation Menu' },
  { href: '/react/components/number-field', label: 'Number Field' },
  { href: '/react/components/popover', label: 'Popover' },
  { href: '/react/components/preview-card', label: 'Preview Card' },
  { href: '/react/components/progress', label: 'Progress' },
  { href: '/react/components/radio', label: 'Radio' },
  { href: '/react/components/scroll-area', label: 'Scroll Area' },
  { href: '/react/components/select', label: 'Select' },
  { href: '/react/components/separator', label: 'Separator' },
  { href: '/react/components/slider', label: 'Slider' },
  { href: '/react/components/switch', label: 'Switch' },
  { href: '/react/components/tabs', label: 'Tabs' },
  { href: '/react/components/toast', label: 'Toast' },
  { href: '/react/components/toggle', label: 'Toggle' },
  { href: '/react/components/toggle-group', label: 'Toggle Group' },
  { href: '/react/components/toolbar', label: 'Toolbar' },
  { href: '/react/components/tooltip', label: 'Tooltip' },
] as const;

export default function ExampleDrawerMobileNav() {
  return (
    <Drawer.Root>
      <Drawer.Trigger className={styles.Button}>Open mobile menu</Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Backdrop className={styles.Backdrop} />
        <Drawer.Viewport className={styles.Viewport}>
          <ScrollArea.Root style={{ position: undefined }} className={styles.ScrollAreaRoot}>
            <ScrollArea.Viewport className={styles.ScrollAreaViewport}>
              <ScrollArea.Content className={styles.ScrollContent}>
                <Drawer.Popup className={styles.Popup}>
                  <nav aria-label="Navigation" className={styles.Panel}>
                    <div className={styles.Header}>
                      <div aria-hidden className={styles.HeaderSpacer} />
                      <div className={styles.Handle} />
                      <Drawer.Close aria-label="Close menu" className={styles.CloseButton}>
                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                          <path
                            d="M0.75 0.75L6 6M11.25 11.25L6 6M6 6L0.75 11.25M6 6L11.25 0.75"
                            stroke="currentcolor"
                            strokeWidth="2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                        </svg>
                      </Drawer.Close>
                    </div>

                    <Drawer.Content className={styles.Content}>
                      <Drawer.Title className={styles.Title}>Menu</Drawer.Title>
                      <Drawer.Description className={styles.Description}>
                        Scroll the long list. Flick down from the top to dismiss.
                      </Drawer.Description>

                      <div className={styles.ScrollArea}>
                        <ul className={styles.List}>
                          {ITEMS.map((item) => (
                            <li key={item.label} className={styles.Item}>
                              <a className={styles.Link} href={item.href}>
                                {item.label}
                              </a>
                            </li>
                          ))}
                        </ul>

                        <ul className={styles.LongList} aria-label="Component links">
                          {LONG_LIST.map((item) => (
                            <li key={item.label} className={styles.Item}>
                              <a className={styles.Link} href={item.href}>
                                {item.label}
                              </a>
                            </li>
                          ))}
                        </ul>
                      </div>
                    </Drawer.Content>
                  </nav>
                </Drawer.Popup>
              </ScrollArea.Content>
            </ScrollArea.Viewport>
            <ScrollArea.Scrollbar className={styles.Scrollbar}>
              <ScrollArea.Thumb className={styles.ScrollbarThumb} />
            </ScrollArea.Scrollbar>
          </ScrollArea.Root>
        </Drawer.Viewport>
      </Drawer.Portal>
    </Drawer.Root>
  );}

Swipe to open

Place <Drawer.SwipeArea> along the edge of the viewport to enable swipe-to-open gestures.

Swipe from the right edge to open the drawer.

index.tsx index.module.css theme.css

'use client';
import * as React from 'react';
import { Drawer } from '@base-ui/react/drawer';
import styles from './index.module.css';

export default function ExampleDrawerSwipeArea() {
  const [portalContainer, setPortalContainer] = React.useState<HTMLDivElement | null>(null);

  return (
    <div className={styles.Root} ref={setPortalContainer}>
      <Drawer.Root swipeDirection="right" modal={false}>
        <Drawer.SwipeArea className={styles.SwipeArea}>
          <span className={styles.SwipeLabel}>Swipe here</span>
        </Drawer.SwipeArea>
        <div className={styles.Center}>
          <div className={styles.Instructions}>
            <p className={styles.Hint}>Swipe from the right edge to open the drawer.</p>
          </div>
        </div>
        <Drawer.Portal container={portalContainer}>
          <Drawer.Backdrop className={styles.Backdrop} />
          <Drawer.Viewport className={styles.Viewport}>
            <Drawer.Popup className={styles.Popup}>
              <Drawer.Content className={styles.Content}>
                <Drawer.Title className={styles.Title}>Library</Drawer.Title>
                <Drawer.Description className={styles.Description}>
                  Swipe from the edge whenever you want to jump back into your playlists.
                </Drawer.Description>
                <div className={styles.Actions}>
                  <Drawer.Close className={styles.Button}>Close</Drawer.Close>
                </div>
              </Drawer.Content>
            </Drawer.Popup>
          </Drawer.Viewport>
        </Drawer.Portal>
      </Drawer.Root>
    </div>
  );
}

Action sheet with separate destructive action

This demo builds an action sheet with a grouped list of actions plus a separate destructive action button.

Detached triggers

A drawer can be controlled by a trigger located either inside or outside the <Drawer.Root> component. For simple, one-off interactions, place the <Drawer.Trigger> inside <Drawer.Root>.

However, if defining the drawer’s content next to its trigger is not practical, you can use a detached trigger. This involves placing the <Drawer.Trigger> outside of <Drawer.Root> and linking them with a handle created by the Drawer.createHandle() function.

Detached triggers

const demoDrawer = Drawer.createHandle();

<Drawer.Trigger handle={demoDrawer}>Open</Drawer.Trigger>

<Drawer.Root handle={demoDrawer}>
  ...
</Drawer.Root>

The drawer can render different content depending on which trigger opened it. This is achieved by passing a payload to the <Drawer.Trigger> and using the function-as-a-child pattern in <Drawer.Root>.

Detached triggers with payload

const demoDrawer = Drawer.createHandle<{ title: string }>();

<Drawer.Trigger handle={demoDrawer} payload={{ title: 'Profile' }}>
  Profile
</Drawer.Trigger>

<Drawer.Trigger handle={demoDrawer} payload={{ title: 'Settings' }}>
  Settings
</Drawer.Trigger>

<Drawer.Root handle={demoDrawer}>
  {({ payload }) => (
    <Drawer.Portal>
      <Drawer.Popup>
        <Drawer.Content>
          <Drawer.Title>{payload?.title}</Drawer.Title>
        </Drawer.Content>
      </Drawer.Popup>
    </Drawer.Portal>
  )}
</Drawer.Root>

Stacking and animations

Use CSS transitions or animations to animate drawer opening, closing, swipe interactions, and nested stacking. The data-starting-style attribute is applied when a drawer starts to open, and data-ending-style is applied when it starts to close.

The --nested-drawers CSS variable can be used to determine stack depth. The frontmost drawer has index 0.

Stack depth

.DrawerPopup {
  --stack-step: 0.05;
  --stack-scale: calc(1 - (var(--nested-drawers) * var(--stack-step)));
  transform: translateY(var(--drawer-swipe-movement-y)) scale(var(--stack-scale));
}

When stacked drawers have varying heights, use the --drawer-height and --drawer-frontmost-height variables to keep collapsed drawers aligned with the frontmost one.

Variable-height stacking

.DrawerPopup {
  --bleed: 3rem;
  --stack-height: max(
    0px,
    calc(var(--drawer-frontmost-height, var(--drawer-height)) - var(--bleed))
  );
  height: var(--drawer-height, auto);
}

.DrawerPopup[data-nested-drawer-open] {
  height: calc(var(--stack-height) + var(--bleed));
  overflow: hidden;
}

The data-nested-drawer-open attribute marks drawers behind the frontmost drawer. Use it with data-nested-drawer-swiping to dim or hide parent drawer content while keeping it visible during nested swipe interactions.

Nested content visibility

.DrawerContent {
  transition: opacity 300ms;
}

.DrawerPopup[data-nested-drawer-open] .DrawerContent {
  opacity: 0;
}

.DrawerPopup[data-nested-drawer-open][data-nested-drawer-swiping] .DrawerContent {
  opacity: 1;
}

The --drawer-swipe-movement-x, --drawer-swipe-movement-y, and --drawer-snap-point-offset CSS variables can be used to create smooth drag and snap offsets:

Swipe and snap offset

.DrawerPopup[data-swipe-direction='right'] {
  transform: translateX(var(--drawer-swipe-movement-x));
}

.DrawerPopup[data-swipe-direction='down'] {
  transform: translateY(
    calc(var(--drawer-snap-point-offset) + var(--drawer-swipe-movement-y))
  );
}

The data-swipe-direction attribute can be used with data-ending-style to animate directional dismissal:

Swipe dismissal direction

.DrawerPopup[data-ending-style][data-swipe-direction='right'] {
  transform: translateX(100%);
}

.DrawerPopup[data-ending-style][data-swipe-direction='down'] {
  transform: translateY(100%);
}

Use --drawer-swipe-progress to fade the backdrop as the drawer is swiped, and --drawer-swipe-strength to scale release transition durations based on swipe velocity.

Backdrop and release timing

.DrawerBackdrop {
  --backdrop-opacity: 0.2;
  opacity: calc(var(--backdrop-opacity) * (1 - var(--drawer-swipe-progress)));
}

.DrawerPopup[data-ending-style],
.DrawerBackdrop[data-ending-style] {
  transition-duration: calc(var(--drawer-swipe-strength) * 400ms);
}

.DrawerPopup[data-swiping],
.DrawerBackdrop[data-swiping] {
  transition-duration: 0ms;
}

API reference

Provider

Provides a shared context for coordinating global Drawer UI, such as indent/background effects based on whether any Drawer is open. Doesn’t render its own HTML element.

childrenReact.ReactNode—

Name: children
Type: React.ReactNode | undefined

Drawer.Provider.PropsHide

Re-Export of Provider props as DrawerProviderProps

Drawer.Provider.StateHide

type DrawerProviderState = {}

IndentBackground

An element placed before <Drawer.Indent> to render a background layer that can be styled based on whether any drawer is open. Renders a <div> element.

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | (( state: Drawer.IndentBackground.State, ) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: Drawer.IndentBackground.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Drawer.IndentBackground.State, ) => ReactElement) | undefined

Drawer.IndentBackground.PropsHide

Re-Export of IndentBackground props as DrawerIndentBackgroundProps

Drawer.IndentBackground.StateHide

type DrawerIndentBackgroundState = {
  /** Whether any drawer within the nearest <Drawer.Provider> is open. */
  active: boolean;
}

Indent

A wrapper element intended to contain your app’s main UI. Applies data-active when any drawer within the nearest <Drawer.Provider> is open. Renders a <div> element.

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: Drawer.Indent.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: Drawer.Indent.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Drawer.Indent.State, ) => ReactElement) | undefined

Drawer.Indent.PropsHide

Re-Export of Indent props as DrawerIndentProps

Drawer.Indent.StateHide

type DrawerIndentState = {
  /** Whether any drawer within the nearest <Drawer.Provider> is open. */
  active: boolean;
}

Root

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

defaultOpenbooleanfalse

Name: defaultOpen
Description: Whether the drawer is initially open.

To render a controlled drawer, use the open prop instead.
Type: boolean | undefined
Default: false

openboolean—

Name: open
Description: Whether the drawer is currently open.
Type: boolean | undefined

onOpenChangefunction—

Name: onOpenChange
Description: Event handler called when the drawer is opened or closed.
Type: | (( open: boolean, eventDetails: Drawer.Root.ChangeEventDetails, ) => void) | undefined

snapPointsDrawerSnapPoint[]—

Name: snapPoints
Description: Snap points used to position the drawer. Use numbers between 0 and 1 to represent fractions of the viewport height, numbers greater than 1 as pixel values, or strings in px/rem units (for example, '148px' or '30rem').
Type: number | string[] | undefined

defaultSnapPointDrawerSnapPoint | null—

Name: defaultSnapPoint
Description: The initial snap point value when uncontrolled.
Type: number | string | null | undefined

snapPointDrawerSnapPoint | null—

Name: snapPoint
Description: The currently active snap point. Use with onSnapPointChange to control the snap point.
Type: number | string | null | undefined

onSnapPointChangefunction—

Name: onSnapPointChange
Description: Callback fired when the snap point changes.
Type: | (( snapPoint: number | string | null, eventDetails: Drawer.Root.SnapPointChangeEventDetails, ) => void) | undefined

actionsRefReact.RefObject<Drawer.Root.Actions | null>—

Name: actionsRef
Description: A ref to imperative actions.

unmount: When specified, the drawer will not be unmounted when closed. Instead, the unmount function must be called to unmount the drawer manually. Useful when the drawer’s animation is controlled by an external library.

close: Closes the drawer imperatively when called.
Type: | React.RefObject<Drawer.Root.Actions | null> | undefined

defaultTriggerIdstring | null—

Name: defaultTriggerId
Description: ID of the trigger that the drawer is associated with. This is useful in conjunction with the defaultOpen prop to create an initially open drawer.
Type: string | null | undefined

disablePointerDismissalbooleanfalse

Name: disablePointerDismissal
Description: Determines whether the drawer should close on outside clicks.
Type: boolean | undefined
Default: false

handleDrawer.Handle<Payload>—

Name: handle
Description: A handle to associate the drawer with a trigger. If specified, allows detached triggers to control the drawer’s open state. Can be created with the Drawer.createHandle() method.
Type: Drawer.Handle<Payload> | undefined

Name: modal
Description: Determines if the drawer enters a modal state when open.

true: user interaction is limited to just the drawer: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled.

false: user interaction with the rest of the document is allowed.

'trap-focus': focus is trapped inside the drawer, but document page scroll is not locked and pointer interactions outside of it remain enabled.
Type: boolean | 'trap-focus' | undefined
Default: true

onOpenChangeCompletefunction—

Name: onOpenChangeComplete
Description: Event handler called after any animations complete when the drawer is opened or closed.
Type: ((open: boolean) => void) | undefined

snapToSequentialPointsbooleanfalse

Name: snapToSequentialPoints
Description: Disables velocity-based snap skipping so drag distance determines the next snap point.
Type: boolean | undefined
Default: false

swipeDirectionDrawerSwipeDirection'down'

Name: swipeDirection
Description: The swipe direction used to dismiss the drawer.
Type: 'up' | 'down' | 'left' | 'right' | undefined
Default: 'down'

triggerIdstring | null—

Name: triggerId
Description: ID of the trigger that the drawer is associated with. This is useful in conjunction with the open prop to create a controlled drawer. There’s no need to specify this prop when the drawer is uncontrolled (that is, when the open prop is not set).
Type: string | null | undefined

children

| React.ReactNode 
|  PayloadChildRenderFunction<Payload>

—

Name: children
Description: The content of the drawer.
Type: React.ReactNode | ((arg: { payload: unknown | undefined }) => ReactNode)<Payload> | undefined

Drawer.Root.PropsHide

Re-Export of Root props as DrawerRootProps

Drawer.Root.StateHide

type DrawerRootState = {}

Drawer.Root.ActionsHide

type DrawerRootActions = { unmount: () => void; close: () => void }

Drawer.Root.ChangeEventReasonHide

type DrawerRootChangeEventReason =
  | 'trigger-press'
  | 'outside-press'
  | 'escape-key'
  | 'close-watcher'
  | 'close-press'
  | 'focus-out'
  | 'imperative-action'
  | 'swipe'
  | 'none'

Drawer.Root.ChangeEventDetailsHide

type DrawerRootChangeEventDetails = (
  | { reason: 'trigger-press'; event: KeyboardEvent | MouseEvent | TouchEvent | PointerEvent }
  | { reason: 'outside-press'; event: MouseEvent | TouchEvent | PointerEvent }
  | { reason: 'escape-key'; event: KeyboardEvent }
  | { reason: 'close-press'; event: KeyboardEvent | MouseEvent | PointerEvent }
  | { reason: 'focus-out'; event: FocusEvent | KeyboardEvent }
  | { reason: 'imperative-action'; event: Event }
  | { reason: 'none'; event: Event }
  | { reason: 'close-watcher'; event: Event }
  | { reason: 'swipe'; event: TouchEvent | PointerEvent }
) & {
  /** Cancels Base UI from handling the event. */
  cancel: () => void;
  /** Allows the event to propagate in cases where Base UI will stop the propagation. */
  allowPropagation: () => void;
  /** Indicates whether the event has been canceled. */
  isCanceled: boolean;
  /** Indicates whether the event is allowed to propagate. */
  isPropagationAllowed: boolean;
  /** The element that triggered the event, if applicable. */
  trigger: Element | undefined;
  preventUnmountOnClose: (() => void);
}

Drawer.Root.SnapPointHide

type DrawerRootSnapPoint = number | string

Drawer.Root.SnapPointChangeEventDetailsHide

type DrawerRootSnapPointChangeEventDetails = (
  | { reason: 'trigger-press'; event: KeyboardEvent | MouseEvent | TouchEvent | PointerEvent }
  | { reason: 'outside-press'; event: MouseEvent | TouchEvent | PointerEvent }
  | { reason: 'escape-key'; event: KeyboardEvent }
  | { reason: 'close-press'; event: KeyboardEvent | MouseEvent | PointerEvent }
  | { reason: 'focus-out'; event: FocusEvent | KeyboardEvent }
  | { reason: 'imperative-action'; event: Event }
  | { reason: 'none'; event: Event }
  | { reason: 'close-watcher'; event: Event }
  | { reason: 'swipe'; event: TouchEvent | PointerEvent }
) & {
  /** Cancels Base UI from handling the event. */
  cancel: () => void;
  /** Allows the event to propagate in cases where Base UI will stop the propagation. */
  allowPropagation: () => void;
  /** Indicates whether the event has been canceled. */
  isCanceled: boolean;
  /** Indicates whether the event is allowed to propagate. */
  isPropagationAllowed: boolean;
  /** The element that triggered the event, if applicable. */
  trigger: Element | undefined;
}

Drawer.Root.SnapPointChangeEventReasonHide

type DrawerRootSnapPointChangeEventReason =
  | 'trigger-press'
  | 'outside-press'
  | 'escape-key'
  | 'close-watcher'
  | 'close-press'
  | 'focus-out'
  | 'imperative-action'
  | 'swipe'
  | 'none'

Trigger

A button that opens the drawer. Renders a <button> element.

handleDrawerHandle<Payload>—

Name: handle
Description: A handle to associate the trigger with a drawer. Can be created with the Drawer.createHandle() method.
Type: DrawerHandle<Payload> | undefined

nativeButtonbooleantrue

Name: nativeButton
Description: Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (for example, <div>).
Type: boolean | undefined
Default: true

payloadPayload—

Name: payload
Description: A payload to pass to the drawer when it is opened.
Type: Payload | undefined

idstring—

Name: id
Description: ID of the trigger. In addition to being forwarded to the rendered element, it is also used to specify the active trigger for drawers in controlled mode (with the Drawer.Root triggerId prop).
Type: string | undefined

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: Drawer.Trigger.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: Drawer.Trigger.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Drawer.Trigger.State, ) => ReactElement) | undefined

Drawer.Trigger.PropsHide

Re-Export of Trigger props as DrawerTriggerProps

Drawer.Trigger.StateHide

type DrawerTriggerState = {
  /** Whether the drawer is currently disabled. */
  disabled: boolean;
  /** Whether the drawer is currently open. */
  open: boolean;
}

SwipeArea

An invisible area that listens for swipe gestures to open the drawer. Renders a <div> element.

swipeDirectionDrawerSwipeDirection—

Name: swipeDirection
Description: The swipe direction that opens the drawer. Defaults to the opposite of Drawer.Root swipeDirection.
Type: 'up' | 'down' | 'left' | 'right' | undefined

disabledbooleanfalse

Name: disabled
Description: Whether the swipe area is disabled.
Type: boolean | undefined
Default: false

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: Drawer.SwipeArea.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: Drawer.SwipeArea.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Drawer.SwipeArea.State, ) => ReactElement) | undefined

data-open

Present when the drawer is open.

data-closed

Present when the drawer is closed.

data-disabled

Present when the swipe area is disabled.

data-swipe-direction

Indicates the swipe direction.

data-swiping

Present when the drawer is being swiped.

Attribute	Description	-
`data-open`	Present when the drawer is open.
`data-closed`	Present when the drawer is closed.
`data-disabled`	Present when the swipe area is disabled.
`data-swipe-direction`	Indicates the swipe direction.
`data-swiping`	Present when the drawer is being swiped.

Drawer.SwipeArea.PropsHide

Re-Export of SwipeArea props as DrawerSwipeAreaProps

Drawer.SwipeArea.StateHide

type DrawerSwipeAreaState = {
  /** Whether the drawer is currently open. */
  open: boolean;
  /** Whether the swipe area is currently being swiped. */
  swiping: boolean;
  /** The swipe direction that opens the drawer. */
  swipeDirection: 'up' | 'down' | 'left' | 'right';
  /** Whether the swipe area is disabled. */
  disabled: boolean;
}

Portal

A portal element that moves the popup to a different part of the DOM. By default, the portal element is appended to <body>. Renders a <div> element.

containerUnion—

Name: container
Description: A parent element to render the portal element into.
Type: | HTMLElement | ShadowRoot | React.RefObject<HTMLElement | ShadowRoot | null> | null | undefined

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: Drawer.Portal.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: Drawer.Portal.State, ) => React.CSSProperties | undefined) | undefined

keepMountedbooleanfalse

Name: keepMounted
Description: Whether to keep the portal mounted in the DOM while the popup is hidden.
Type: boolean | undefined
Default: false

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Drawer.Portal.State, ) => ReactElement) | undefined

Drawer.Portal.PropsHide

Re-Export of Portal props as DrawerPortalProps

Drawer.Portal.StateHide

type DrawerPortalState = {}

Backdrop

An overlay displayed beneath the popup. Renders a <div> element.

forceRenderbooleanfalse

Name: forceRender
Description: Whether the backdrop is forced to render even when nested.
Type: boolean | undefined
Default: false

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: Drawer.Backdrop.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: Drawer.Backdrop.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Drawer.Backdrop.State, ) => ReactElement) | undefined

data-open

Present when the drawer is open.

data-closed

Present when the drawer is closed.

data-starting-style

Present when the drawer is animating in.

data-ending-style

Present when the drawer is animating out.

Attribute	Description	-
`data-open`	Present when the drawer is open.
`data-closed`	Present when the drawer is closed.
`data-starting-style`	Present when the drawer is animating in.
`data-ending-style`	Present when the drawer is animating out.

--drawer-swipe-progress

The swipe progress of the drawer gesture.

CSS Variable	Description	-
`--drawer-swipe-progress`	The swipe progress of the drawer gesture.

Drawer.Backdrop.PropsHide

Re-Export of Backdrop props as DrawerBackdropProps

Drawer.Backdrop.StateHide

type DrawerBackdropState = {
  /** Whether the drawer is currently open. */
  open: boolean;
  /** The transition status of the component. */
  transitionStatus: TransitionStatus;
}

Viewport

A positioning container for the drawer popup that can be made scrollable. Renders a <div> element.

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: Drawer.Viewport.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: Drawer.Viewport.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Drawer.Viewport.State, ) => ReactElement) | undefined

data-open

Present when the drawer is open.

data-closed

Present when the drawer is closed.

data-nested

Present when the drawer is nested within another drawer.

data-starting-style

Present when the drawer is animating in.

data-ending-style

Present when the drawer is animating out.

Attribute	Description	-
`data-open`	Present when the drawer is open.
`data-closed`	Present when the drawer is closed.
`data-nested`	Present when the drawer is nested within another drawer.
`data-starting-style`	Present when the drawer is animating in.
`data-ending-style`	Present when the drawer is animating out.

Drawer.Viewport.PropsHide

Re-Export of Viewport props as DrawerViewportProps

Drawer.Viewport.StateHide

type DrawerViewportState = {
  /** Whether the drawer is currently open. */
  open: boolean;
  /** The transition status of the component. */
  transitionStatus: TransitionStatus;
  /** Whether the drawer is nested within another drawer. */
  nested: boolean;
  /** Whether the drawer has nested drawers open. */
  nestedDialogOpen: boolean;
}

A container for the drawer contents. Renders a <div> element.

initialFocusUnion—

Name: initialFocus
Description: Determines the element to focus when the drawer is opened.

false: Do not move focus.

true: Move focus based on the default behavior (first tabbable element or popup).

RefObject: Move focus to the ref element.

function: Called with the interaction type (mouse, touch, pen, or keyboard). Return an element to focus, true to use the default behavior, or false/undefined to do nothing.
Type: | boolean | React.RefObject<HTMLElement | null> | (( openType: 'mouse' | 'touch' | 'pen' | 'keyboard' | '', ) => boolean | void | HTMLElement | null) | undefined

finalFocusUnion—

Name: finalFocus
Description: Determines the element to focus when the drawer is closed.

false: Do not move focus.

true: Move focus based on the default behavior (trigger or previously focused element).

RefObject: Move focus to the ref element.

function: Called with the interaction type (mouse, touch, pen, or keyboard). Return an element to focus, true to use the default behavior, or false/undefined to do nothing.
Type: | boolean | React.RefObject<HTMLElement | null> | (( closeType: | 'mouse' | 'touch' | 'pen' | 'keyboard' | '', ) => boolean | void | HTMLElement | null) | undefined

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: Drawer.Popup.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: Drawer.Popup.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Drawer.Popup.State, ) => ReactElement) | undefined

data-open

Present when the drawer is open.

data-closed

Present when the drawer is closed.

data-expanded

Present when the drawer is at the expanded (full-height) snap point.

data-nested-drawer-open

Present when a nested drawer is open.

data-nested-drawer-swiping

Present when a nested drawer is being swiped.

data-swipe-direction

Indicates the swipe direction.

data-swipe-dismiss

Present when the drawer is dismissed by swiping.

data-swiping

Present when the drawer is being swiped.

data-starting-style

Present when the drawer is animating in.

data-ending-style

Present when the drawer is animating out.

Attribute	Description	-
`data-open`	Present when the drawer is open.
`data-closed`	Present when the drawer is closed.
`data-expanded`	Present when the drawer is at the expanded (full-height) snap point.
`data-nested-drawer-open`	Present when a nested drawer is open.
`data-nested-drawer-swiping`	Present when a nested drawer is being swiped.
`data-swipe-direction`	Indicates the swipe direction.
`data-swipe-dismiss`	Present when the drawer is dismissed by swiping.
`data-swiping`	Present when the drawer is being swiped.
`data-starting-style`	Present when the drawer is animating in.
`data-ending-style`	Present when the drawer is animating out.

--drawer-frontmost-height

The height of the frontmost open drawer in the current nested drawer stack.

--drawer-height

The height of the drawer popup.

--drawer-snap-point-offset

The snap point offset used for translating the drawer.

--drawer-swipe-movement-x

The swipe movement on the X axis.

--drawer-swipe-movement-y

The swipe movement on the Y axis.

--drawer-swipe-strength

A scalar (0.1–1) used to scale the swipe release transition duration in CSS.

--nested-drawers

The number of nested drawers that are currently open.

CSS Variable	Description	-
`--drawer-frontmost-height`	The height of the frontmost open drawer in the current nested drawer stack.
`--drawer-height`	The height of the drawer popup.
`--drawer-snap-point-offset`	The snap point offset used for translating the drawer.
`--drawer-swipe-movement-x`	The swipe movement on the X axis.
`--drawer-swipe-movement-y`	The swipe movement on the Y axis.
`--drawer-swipe-strength`	A scalar (0.1–1) used to scale the swipe release transition duration in CSS.
`--nested-drawers`	The number of nested drawers that are currently open.

Drawer.Popup.StateHide

type DrawerPopupState = {
  /** Whether the drawer is currently open. */
  open: boolean;
  /** The transition status of the component. */
  transitionStatus: TransitionStatus;
  /** Whether the active snap point is the full-height expanded state. */
  expanded: boolean;
  /** Whether the drawer is nested within a parent drawer. */
  nested: boolean;
  /** Whether the drawer has nested drawers open. */
  nestedDrawerOpen: boolean;
  /** Whether a nested drawer is currently being swiped. */
  nestedDrawerSwiping: boolean;
  /** The swipe direction used to dismiss the drawer. */
  swipeDirection: 'up' | 'down' | 'left' | 'right';
  /** Whether the drawer is being swiped. */
  swiping: boolean;
}

Content

A container for the drawer contents. Renders a <div> element.

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: Drawer.Content.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: Drawer.Content.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Drawer.Content.State, ) => ReactElement) | undefined

Drawer.Content.PropsHide

Re-Export of Content props as DrawerContentProps

Drawer.Content.StateHide

type DrawerContentState = {}

Title

A heading that labels the drawer. Renders an <h2> element.

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: Drawer.Title.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: Drawer.Title.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Drawer.Title.State, ) => ReactElement) | undefined

Drawer.Title.PropsHide

Re-Export of Title props as DrawerTitleProps

Drawer.Title.StateHide

type DrawerTitleState = {}

Description

A paragraph with additional information about the drawer. Renders a <p> element.

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | (( state: Drawer.Description.State, ) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: Drawer.Description.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Drawer.Description.State, ) => ReactElement) | undefined

Drawer.Description.PropsHide

Re-Export of Description props as DrawerDescriptionProps

Drawer.Description.StateHide

type DrawerDescriptionState = {}

Close

A button that closes the drawer. Renders a <button> element.

nativeButtonbooleantrue

Name: nativeButton
Description: Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (for example, <div>).
Type: boolean | undefined
Default: true

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: Drawer.Close.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: Drawer.Close.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Drawer.Close.State, ) => ReactElement) | undefined

Drawer.Close.PropsHide

Re-Export of Close props as DrawerCloseProps

Drawer.Close.StateHide

type DrawerCloseState = {
  /** Whether the button is currently disabled. */
  disabled: boolean;
}

createHandle

Creates a new handle to connect a Dialog.Root with detached Dialog.Trigger components.

Return value

Drawer.Handle<Payload>

Handle

A handle to control a Dialog imperatively and to associate detached triggers with it.

Constructor parameters

storeDialogStore<Payload>—

Name: store
Type: DialogStore<Payload> | undefined

Properties

isOpen

boolean

readonly

Name: isOpen
Description: Indicates whether the dialog is currently open.
Type: boolean
Modifiers: readonly

Methods

open(triggerId)

void

Name: open
Description: Opens the dialog and associates it with the trigger with the given id. The trigger, if provided, must be a Dialog.Trigger component with this handle passed as a prop.

This method should only be called in an event handler or an effect (not during rendering).
Parameters: triggerId—
string | null
ID of the trigger to associate with the dialog. If null, the dialog will open without a trigger association.
Returns: void

openWithPayload(payload)

void

Name: openWithPayload
Description: Opens the dialog and sets the payload. Does not associate the dialog with any trigger.
Parameters: payload—
Payload
Payload to set when opening the dialog.
Returns: void

close()

void

Name: close
Description: Closes the dialog.
Returns: void

Drawer

Drawer.Provider.PropsHide

Drawer.Provider.StateHide

Drawer.IndentBackground.PropsHide

Drawer.IndentBackground.StateHide

Drawer.Indent.PropsHide

Drawer.Indent.StateHide

Drawer.Root.PropsHide

Drawer.Root.StateHide

Drawer.Root.ActionsHide

Drawer.Root.ChangeEventReasonHide

Drawer.Root.ChangeEventDetailsHide

Drawer.Root.SnapPointHide

Drawer.Root.SnapPointChangeEventDetailsHide

Drawer.Root.SnapPointChangeEventReasonHide

Drawer.Trigger.PropsHide

Drawer.Trigger.StateHide

Drawer.SwipeArea.PropsHide

Drawer.SwipeArea.StateHide

Drawer.Portal.PropsHide

Drawer.Portal.StateHide

Drawer.Backdrop.PropsHide

Drawer.Backdrop.StateHide

Drawer.Viewport.PropsHide

Drawer.Viewport.StateHide

Drawer.Popup.PropsHide

Drawer.Popup.StateHide

Drawer.Content.PropsHide

Drawer.Content.StateHide

Drawer.Title.PropsHide

Drawer.Title.StateHide

Drawer.Description.PropsHide

Drawer.Description.StateHide

Drawer.Close.PropsHide

Drawer.Close.StateHide

Return value

Constructor parameters

Properties

Methods